CSS Pie Timer: Today’s Version Is Just a Conic Gradient
Kitty Giraudel recently looked back at the classic CSS pie timer technique from CSS-Tricks’ archive. That original approach remains a solid piece of trickery, but the updated version is just as clever and noticeably simpler.
The heart of the older trick is the steps() animation function, which snaps a pseudo-element “mask” into place by rotating it half a turn at the right moment. That’s a genuinely elegant bit of CSS manipulation.
To get ahead of the inevitable “CSS Pie Timer Re-Revisited” post: we do not need masks or steps() at all anymore. Just paint the pie with a conic-gradient() and animate the custom property holding the percentage value from 0% to 100%.
As of this writing, that works in Chrome — though not yet in other browsers.
