CSS Pie Timer Re-Revisited

Kitty mirrored on an historic weblog submit right here on CSS-Methods on make an animated pie timer. The outdated method remains to be intelligent. The new method is equally intelligent and far simpler. I notably like the steps() animation operate that “flips” the “masks” from side-to-side by rotating a pseudo-element half a flip, That’s simply good CSS trickery by gosh.

Enable me to do the “CSS Pie Timer Re-Revisted” submit a yr or two early simply to get forward of issues. It’s not a trick anymore — we simply use a conic-gradient() and animate the share worth as a customized property 0% to 100%.

@property –percentage {
initial-value: 0%;
inherits: false;
syntax: ‘<share>’;
}

.chart {
background: conic-gradient(pink var(–percentage), white 0);
animation: timer 4s infinite linear;
}

@keyframes timer {
to {
–percentage: 100%;
}
}

This could work in Chrome (however nothing else) for now:

The submit CSS Pie Timer Re-Revisited appeared first on CSS-Methods.

You’ll be able to help CSS-Methods by being an MVP Supporter.