Прогресс круг не идет вокруг изображения

Question

Прогресс круг не идет вокруг изображения

1

Кажется, я не вижу кругового движения вокруг всех трех изображений. Вот JSFiddle проблемы. Пожалуйста помоги!

CSS

.wrapper {
  width: 100px;
  height: 100px;
}

.wrapper>#bar, #bar2, #bar3,
.wrapper>img {
  width: 100%;
  height: 100%;
}

.wrapper>img {
  box-sizing: border-box;
  padding: 4%;
}

.wrapper>img {
  border-radius: 50%;
}

JavaScript

var circle = new ProgressBar.Circle('#bar', {
  strokeWidth: 4,
  color: '#000'

});
circle.animate(1);

var circle = new ProgressBar.Circle('#bar2', {
  strokeWidth: 4,
  color: '#000'

});
circle.animate(1);

var circle = new ProgressBar.Circle('#bar3', {
  strokeWidth: 4,
  color: '#000'

});
circle.animate(1);

Спасибо, Ян

ianmtrent 26 июнь 2017, в 04:33

Источник

Теги:

javascript

html5

css3

1 ответ

Ещё вопросы

JV Lobo · Answer 1 · 2017-06-26T00-38-00.000Z

Вы можете сделать что-то вроде этого:

var circle = new ProgressBar.Circle('#bar', {
  strokeWidth: 4,
  color: '#000'
});

circle.animate(1);

var circle = new ProgressBar.Circle('#bar2', {
  strokeWidth: 4,
  color: '#000'
});

circle.animate(1);

var circle = new ProgressBar.Circle('#bar3', {
  strokeWidth: 4,
  color: '#000'
});

circle.animate(1);

.wrapper {
  width: 100px;
  height: 100px;
}

.wrapper > #bar,
#bar2,
#bar3 {
  position: relative;
}

.wrapper > #bar,
#bar2,
#bar3,
.wrapper img {
  width: 100%;
  height: 100%;
}

.wrapper img {
  box-sizing: border-box;
  padding: 4%;
  border-radius: 50%;
}

.wrapper svg {
  position: absolute;
  top: 0;
  left: 0;
}

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.js"></script>
<div class="wrapper">
  <div id="bar"><img src="http://i.imgur.com/391FcV0.png" /></div>
  <div id="bar2"><img src="http://i.imgur.com/NtqQEKF.png" /></div>
  <div id="bar3"><img src="http://i.imgur.com/NGROIlB.png" /></div>
</div>

Благодарю. Я исправил это в моих CSS, HTML и JavaScript. Но когда я открываю html файл, он не оживляет. Я уверен, что у меня правильно связан мой JavaScript. Я не знаю, что происходит.
это совсем другая история ... вы проверяли ошибки в консоли?