@Sector567

Как анимировать такой круглый прогрессбар?

Нужно чтобы оранжевая линия прогресса у
первого круга прокрутилась и остановилась на 90 градусах (не делая полных оборотов),
у второго круга прокрутилась 2 полных оборота, а 3-й оборот остановился где-то на 45 градусах
и у третьего круга прокрутилась 10 полных оборотов.

Может быть есть другая css реализация для подобной анимации?
P.S. плагины не подходят

Вот код
https://codepen.io/catcliff/pen/WNbJBjz?editors=1100
  • Вопрос задан
  • 201 просмотр
Решения вопроса 1
@StasEx
Добавьте в // -- vars переменную $progress: 45;
Нужно найти эту строку и добавить в нее переменную:
&.progress-90 {
    @include draw-progress($progress, #e67e22);
  }


Потом создавайте анимацию и меняйте через кейфреймы
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы