CSS Pie Timer Re-Revisited

Kitty reflected on an ancient blog post here on CSS-Tricks on how to make an animated pie timer. The old technique is still clever. The new technique is equally clever and much easier. I particularly like the steps() animation function that “flips” the “mask” from side-to-side by rotating a pseudo-element half a turn, That’s just good CSS trickery by gosh.

Allow me to do the “CSS Pie Timer Re-Revisted” post a year or two early just to get ahead of things. It’s not a trick anymore — we just use a conic-gradient() and animate the percentage value as a custom property 0% to 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%; }

This should work in Chrome (but nothing else) for now:

Leave a Reply

Your email address will not be published. Required fields are marked *