Kiano,
замените id на class
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.container {
margin: 20px;
width: 200px;
height: 200px;
}
p{
height: 2000px;
}
</style>
<script type="text/javascript" src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<script>
document.addEventListener("DOMContentLoaded", vis, false);
function vis() {
var div = [].slice.call(document.querySelectorAll(".container"), 0);
div = div.map(function(el) {
return {
el: el,
bar: new ProgressBar.Circle(el, {
strokeWidth: 6,
easing: "easeInOut",
duration: 1400,
color: "#FFEA82",
trailColor: "#eee",
trailWidth: 1,
svgStyle: null
})
}
});
function anim() {
div = div.filter(function(el, i) {
var top = el.el.getBoundingClientRect().top;
console.log(top);
if (top > 0 && top < window.innerHeight) {
el.bar.animate(1);
return false
}
return true
});
!div.length && window.addEventListener("scroll", anim, false)
}
window.addEventListener("scroll", anim, false);
anim()
};
</script>
</head>
<body>
<p></p>
<div class="container"></div>
<p></p>
<div class="container"></div>
</body>
</html>