Нужно чтобы каждый прогресс бар мог показывать разное значение, которое я задаю в id.
Пробовал через массив айдишников, но двойная итерация все ломает. Скорее всего надо через this
, но не пойму как
$('body').click(function() {
var IDArray = [];
$(".progress").each(function(){IDArray.push($(this).attr("id"))}); // Беру массив айди
var i = 0;
var a = 0;
var c = "d00"; //Цвет
var test = setInterval(function(){
if(i == $(".progress").attr("id")) { // Останавливаю
return;
}else{
i = i + 1;
a = i/100;
var rd = document.getElementsByClassName("progress")[0].getAttribute("r"); // Радиус прогресса
var x = rd*2*Math.PI;
var p = x * a;
$(".progress").attr("stroke-dasharray", p + ", " + x);
$(".progress").attr("stroke", "#"+ c); // Задаю цвет
$("text").text(i + "%");
}
},15);
});
.progress{
fill: #f2f2f2;
stroke-width: 10;
transform: rotate(-90deg);
transform-origin: 50% 50%;
cx: 75;
cy: 75;
}
.center{
fill: #f2f2f2;
}
text{
fill: #000;
font-family: 'Arial', sans-serif;
font-size: 40px;
}
svg{
background: #f2f2f2;
border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="150" height="150">
<circle id="70" class="progress" r="70" />
<text text-anchor="middle" x="75" y="90" />
</svg>
<svg width="150" height="150">
<circle id="90" class="progress" r="70" />
<text text-anchor="middle" x="75" y="90" />
</svg>