CSS Pie Timer Re-Revisited

Avatar of Chris Coyier
Chris Coyier on

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

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: