CSS Pie Timer revisitado | Programar Plus ▷ Tutoriales

Kitty reflexionó sobre una publicación de blog antigua aquí en Programar Plussobre 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 fácil. particularmente me gusta el steps() función de animación que “voltea” la “máscara” de lado a lado girando un pseudo-elemento medio turn, Eso es solo 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 a las cosas. Ya no es un truco, solo usamos un conic-gradient() y anime el valor porcentual como una propiedad personalizada 0% a 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:

CodePen Embed Fallback