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

Question

[Sector567]

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

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

Вот код
https://codepen.io/catcliff/pen/WNbJBjz?editors=1100

Comments

[Kizzeon]

Думаю такое можно реализовать используя :after и :before
Сразу вспомнил про хорошее видео devtips
Там рамки тоньше, анимация бесконечная но думаю всё редактируемо

[Aetae]

Говоря "плагины не подходят" вы имеете на примете готовый "плагин" с таким функционалом? Тогда берите его и вычленяйте нужный вам код.

Answer 1

[StasEx]

Добавьте в // -- vars переменную $progress: 45;
Нужно найти эту строку и добавить в нее переменную:

&.progress-90 {
    @include draw-progress($progress, #e67e22);
  }

Потом создавайте анимацию и меняйте через кейфреймы

Comments

[Sector567]

Не совсем могу понять как дальше сделать
https://codepen.io/catcliff/pen/WNbJBjz