Olá,

Estou trabalhando em um projeto open source chamado Verse, que de forma simples exibir um versículo bíblico a cada 24 horas.

Porém em uma nova releitura do design que estamos trazendo, existe uma feature para ter uma espécie de "progress bar" ao redor do countdown, veja o exemplo abaixo:

![Captura de tela de 2024-05-25 09-44-56](https://github.com/eoSalinas/verse/assets/80262440/69cc17b3-f216-4876-9f20-f61182862ae8)


Alguém teria alguma ideia como podemos fazer isso? Ou algum material que possa ajudar?

[Veja o repositório no GitHub](https://github.com/eoSalinas/verse/)
[Issue de Redesign](https://github.com/eoSalinas/verse/issues/33)

Dá pra resolver usando uma borda com `conic-gradient`.

Dá uma olhada nesse artigo: https://web.dev/articles/conic-gradient-border?hl=pt-br

É só questão de ajustar o gradiente para que haja uma transição rapida entre o preto e o cinza, e o angulo dessa transição deve ser proporcional ao percentual

Ideias de como fazer esse countdown + progress bar?

Olá, Estou trabalhando em um projeto open source chamado Verse, que de forma simples exibir um versículo bíblico a cada 24 horas. Porém em uma nova releitura do design que estamos trazend...