@LastGeneral

Почему не работает прогресс анимация?

Нужно сделать круговую анимацию 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);
  • Вопрос задан
  • 67 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Sportrecs Москва
от 180 000 ₽
МТС Касса Ульяновск
от 100 000 до 200 000 ₽
PiRL Ventures Санкт-Петербург
от 80 000 до 100 000 ₽
19 апр. 2021, в 12:05
3000 руб./за проект
19 апр. 2021, в 11:40
20000 руб./за проект
19 апр. 2021, в 11:39
5000 руб./за проект