javascript - 进度圈不会四处走动

我似乎无法获得围绕所有三个图像的进度圈。这是问题的JSFiddle。请帮忙！

http://jsfiddle.net/ror37gjk/60/

的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);

谢谢，
伊恩

最佳答案

您可以执行以下操作：

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>

关于javascript - 进度圈不会四处走动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44752107/