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 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

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

Veja o repositório no GitHub Issue de Redesign

eliaseashá 10 meses

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