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

Question

[uRoot]

Подскажите как сделать вот такое же, только на чистом JS/CSS, или может кто-то находил похожее?



В данном примере используется библиотека на jQ, а у меня React. Обратите внимание, что под низом есть текст. Многие реализации на чистом CSS используют подложки и двойную анимацию, что перекрывает текст под низом.

Comments

[sinneren]

https://dev.to/webdeasy/from-jquery-to-javascript-...

[uRoot]

sinneren, целую бибилиотеку переводить на JS... такое

[sinneren]

uRoot, библиотеку? никто неговорил. а свой код, не?

[uRoot]

sinneren,

библиотеку? никто неговорил

В шапке же написано: "В данном примере используется библиотека на jQ"

а свой код, не?

Какой свой код, если я спрашиваю как это сделать?

Answer 1

[Александр]

Вариант 1 - нажмите, чтобы запустить.
Прогресс на CSS, обновление на JS.

Вариант 2 - нажмите, чтобы запустить.
Всё на JS.

В React, надеюсь, обернете сами.

Comments

[uRoot]

Спасибо. На вид вроде отрабатывает как нужно. Буду пробовать