Temporizador de pastel CSS revisado nuevamente

Kitty reflexionó sobre una antigua publicación de blog aquí sobre CSS-Tricks sobre cómo hacer un temporizador de pastel animado. La vieja técnica sigue siendo inteligente. La nueva técnica es igualmente inteligente y mucho más sencilla. Me gusta particularmente la steps()función de animación que “voltea” la “máscara” de lado a lado girando un pseudoelemento medio centímetro turn. Eso es simplemente un buen truco de CSS, por Dios.

---

Permítanme hacer la publicación “CSS Pie Timer Re-Revisted” uno o dos años antes solo para adelantarme. Ya no es un truco: simplemente usamos a conic-gradient()y animamos el valor porcentual como una propiedad personalizada 0%para 100%.

@property --percentage {  initial-value: 0%;  inherits: false;  syntax: 'percentage';}.chart {  background: conic-gradient(red var(--percentage), white 0);  animation: timer 4s infinite linear;}@keyframes timer {  to {    --percentage: 100%;  }}

Esto debería funcionar en Chrome (pero nada más) por ahora: