← All elements
<div class="dn"><span>72%</span></div>About this loader
A percentage ring that fills smoothly using a registered custom property and a conic-gradient with a hollow centre.
How it works
A registered custom property --v, typed as a percentage, feeds a conic-gradient that paints the filled part of the ring. A keyframe animates --v from 5 percent to 72 percent, which only works because @property tells the browser it is a number it can interpolate. A pseudo-element covers the centre to turn the disc into a ring.
Ways to customise it
- Change 72% in both the variable and the keyframe to show another value.
- Edit the two blues in the gradient.
- Change the inset on ::before to make the ring thicker or thinner.
Good to know
@property works in current browsers, and older ones show the final ring without animation. Add the percentage as visible text, as the demo does, so the value is accessible.
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.