プログレスサークルが周りにいない画像

Question

3つの画像の周りにプログレスサークルが表示されないようです。ここに問題の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); 

おかげで、 イアン

Answer 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>