• Previous CSS Tip
• Next CSS Tip

Circular progress using scroll-driven animations

Transforming the native progress element into a circular one.

• No extra elements (only the <progress> tag)
• No Magic Numbers
• Everything is controlled by the "max" and "value" attributes
• Powered by Scroll-Driven animations & @property

It's a Chrome-only experimentation:

See the Pen Circular progress element using scroll-driven animation by Temani Afif (@t_afif) on CodePen.

More CSS Tips

• Get the screen width & height without JavaScript
• Border gradient with border-radius
• Inverted border-radius using CSS mask
• Grainy texture using CSS gradients
• Fancy hover effect with anchor positioning
• Cut-out shapes using clip-path