CODEWITHSUNDEEP
javascripthtmlcss
user8212730
user8212730

Reputation:

Progress Circle Not Going Around Image

I cant seem to get the progress circle around all three images. Here is a JSFiddle of the problem. Please help!

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

Thanks, Ian

Upvotes: 1

Views: 54

Answers (1)

JV Lobo
JV Lobo

Reputation: 6316

You can do something like this:

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>

Upvotes: 1

Related Questions