Нужно сделать круговую анимацию 3 счетчиков, в тот момент как им добавляемся класс .animation, нашел пример счетчика, но когда пытаюсь переделать под себя не работает, что делаю не так?
<div class="progress-circle first animated" data-progress="0">
<div class="ko-circle">
<div class="full ko-progress-circle__slice">
<div class="ko-progress-circle__fill"></div>
</div>
<div class="ko-progress-circle__slice">
<div class="ko-progress-circle__fill"></div>
<div class="ko-progress-circle__fill ko-progress-circle__bar"></div>
</div>
</div>
<div class="ko-progress-circle__overlay"></div>
</div>
<div class="progress-circle two animated" data-progress="0">
<div class="ko-circle">
<div class="full ko-progress-circle__slice">
<div class="ko-progress-circle__fill"></div>
</div>
<div class="ko-progress-circle__slice">
<div class="ko-progress-circle__fill"></div>
<div class="ko-progress-circle__fill ko-progress-circle__bar"></div>
</div>
</div>
<div class="ko-progress-circle__overlay"></div>
</div>
<div class="progress-circle three animated" data-progress="0">
<div class="ko-circle">
<div class="full ko-progress-circle__slice">
<div class="ko-progress-circle__fill"></div>
</div>
<div class="ko-progress-circle__slice">
<div class="ko-progress-circle__fill"></div>
<div class="ko-progress-circle__fill ko-progress-circle__bar"></div>
</div>
</div>
<div class="ko-progress-circle__overlay"></div>
</div>
.progress-circle {
margin: 20px auto;
width: 120px;
height: 120px;
background-color: #D9D9D9;
border-radius: 50%;
}
.progress-circle .ko-progress-circle__slice,
.progress-circle .ko-progress-circle__fill {
width: 120px;
height: 120px;
position: absolute;
-webkit-backface-visibility: hidden;
transition: transform 1s;
border-radius: 50%;
}
.progress-circle .ko-progress-circle__slice {
clip: rect(0px, 120px, 120px, 60px);
}
.progress-circle .ko-progress-circle__slice .ko-progress-circle__fill {
clip: rect(0px, 60px, 120px, 0px);
background-color: #1291D4;
}
.progress-circle .ko-progress-circle__overlay {
width: 105px;
height: 105px;
position: absolute;
margin-left: 7.5px;
margin-top: 7.5px;
background-color: #fbfbfb;
border-radius: 50%;
}
.progress-circle[data-progress="75"] .ko-progress-circle__slice.full,
.progress-circle[data-progress="75"] .ko-progress-circle__fill {
transform: rotate(135deg);
}
.progress-circle[data-progress="75"] .ko-progress-circle__fill.ko-progress-circle__bar {
transform: rotate(270deg);
}
.progress-circle[data-progress="76"] .ko-progress-circle__slice.full,
.progress-circle[data-progress="76"] .ko-progress-circle__fill {
transform: rotate(136.8deg);
}
.progress-circle[data-progress="76"] .ko-progress-circle__fill.ko-progress-circle__bar {
transform: rotate(273.6deg);
}
.progress-circle[data-progress="89"] .ko-progress-circle__slice.full,
.progress-circle[data-progress="89"] .ko-progress-circle__fill {
transform: rotate(160.2deg);
}
.progress-circle[data-progress="89"] .ko-progress-circle__fill.ko-progress-circle__bar {
transform: rotate(320.4deg);
}
window.randomize = function() {
$('.progress-circle.first.animated').attr('data-progress',75 );
}
window.randomize = function() {
$('.progress-circle.two.animated').attr('data-progress',89 );
}
window.randomize = function() {
$('.progress-circle.animated').attr('data-progress',76 );
}
setTimeout(window.randomize, 200);
$('.progress-circle.animated').click(window.randomize);
