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

Question

[Александр Осадчий]

Здравствуйте!

Подскажите пожалуйста, как сделать такой таймер (делаю на NextJS)?


Может у кого-нибудь есть похожие исходники?

Comments

[Алексей Уколов]

Что конкретно вы не можете сделать/найти самостоятельно?

[Александр Осадчий]

Алексей Уколов, Больше всего вопросов вызывает вертикальный отчет цифр с градиентами

[Анатолий Куликов]

Александр Осадчий, так просто столбец из цифр делаете и изменяете ему position любым удобным способом, а саму область (где цифры отображаются) просто делаете с затенением сверху и снизу, а по центру - прозрачную.

[Aetae]

Ну и если таки градиент цифр должен быть прозрачным, а не фоном, то тогда остаётся только mask. (Ну или рисовать всё на canvas)

Вообще конечно дизайнер молодец. Особенно мне нравится граница вокруг тёмной "дольки". Очевидно, что она сделана исключительно, чтобы долька не сливалась с фоном. Однако, если фон предполагается вариативным и, допустим, окажется фиолетовым - мы должны будем как-то это предвидеть и нарисовать границу уже вокруг фиолетовой дольки?)

Answer 1

[Даниил Секретов]

set timout + немного css посмотри как линии делать толщину и тд, и еще useState
https://react.dev/reference/react/useState
https://ru.stackoverflow.com/questions/1293220/Как...
Во второй ссылке ответ по линиям