How to implement animation of circular progress bar on pure javascript? Interesting moment, how to make the filling of the circle color

  • 2
    Hello! In your question you can see a misunderstanding of the topic. What does it mean to implement in pure javascript? when the appearance can be set using styles (css). You may need to implement animation on js? While minus put your question. Write more, remove the minus. All the best and good day to you! - Alexander Kazakov
  • codepen.io => search => radial progress bar Choose which implementation is clearer / more like it. Example codepen.io/nelsyeung/pen/MwdWmj - websnap
  • You can do it on css ... but from my own experience I will say that this is not the best idea. Do not fool yourself, do it on svg + js or canvas + js. And look at the examples on the codepen, as you have already suggested - Evgeniy Klimovich Nov.
  • one
    medium.com/@andsens/… - entithat
  • one
    So, for example: ru.stackoverflow.com/questions/628297/… - humster_spb

1 answer 1

Good day.

In short, you create a circle, inside you center another circle and with time, the circle inside increases in width and height.

Made you an example:
https://codepen.io/AndreyMyP/pen/Mrqbvx

<!-- Обертка, чтобы центрировать --> <div class="wrapper wrapper__align-inside"> <!-- Внешний круг --> <div class="circle circle__block circle_cosmetics"> <!-- Процент загрузки в числе --> <div id="jsCount" class="circle__count circle__count_cosmetics">0 %</div> <!-- Внутренний круг --> <div id="jsSize" class="circle__item circle__item_cosmetics"></div> </div> </div>