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:
Hmmm… nothing shows up on iPad Safari. Is that go be expected? Is that optimal?
Note the line:
The point of my extra-futuristic version is a reliance on
@property
.Francky Kleyneman has another method here that isn’t as clean as the conic-gradient version, but reduces the need of one pseudo-element from Kitty’s new version:
http://clba.nl/experiments/pie-timer/