Как создать круглый прогресс бар с кругляшком на конце?

Question

[Lara B]

Просто анимированный прогресс бар сделать - не проблема. Svg с тегами circle внутри и изменение свойства stroke-dasharray
А вот как закрепить на конце кругляшок? Ничего путного не смогла придумать
Буду благодарна за любую наводку и подсказку!

Comments

[Ankhena]

Нарисовать кружок circle. Если всё в svg. Вращать с помощью @keyframes и transform-origin

[historydev]

Ankhena, Да, тут изи, сместить центр вращения и всё

Answer 1

[Виктор Кожухарь]

Гугл быстро дал ответ)
https://stackoverflow.com/questions/72037432/css-p...

Comments

[Lara B]

Виктор, супер! А какой запрос вы гуглили? Я очень много вариантов нашла по фразе "circular progress " , а вот сформулировать, что мне нужен кругляш на конце, не знала. Поэтому спрашиваю у вас, как искать в таких случаях :)

[Lara B]

Кстати и искала ведь именно на codepen по запросу circular progress. Посмотрела пример, спасибо огромное, еще раз!

[Виктор Кожухарь]

Lara B, Прямо в гугле "circular progress bar with dot on the end". Правильно называется "radial progress bar".
Кстати, гугл в последнее время испортился, поэтому я рекомендую искать и в других поисковиказ. duckduckgo.com, search.brave.com, и даже bing.com.

Ещё можно прямо на stackoverflow и на reddit.com искать

Answer 2

[historydev]

Comments

[Lara B]

Спасибо большое ! Изучу.