← All elements
<div class="cd"><span></span></div>About this loader
A countdown from five to one that changes number with a stepped animation on a counter, with a ring that drains in sync.
How it works
Two registered custom properties do the work. --n is an integer that counts from five to zero with steps(5), and the number shown comes from a counter-reset using that variable. --p is a percentage that shrinks, which makes the conic-gradient ring drain in sync. @property is what allows the browser to animate these values.
Ways to customise it
- Change 5 in the keyframes, counter-reset and steps() together to count from another number.
- Edit the ring colours.
- Change the 5s duration to change the total time.
Good to know
@property is supported in current Chrome, Safari and Firefox, and older browsers show a static number. It is a visual timer only, so do not use it for anything time-critical.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.