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.
And a version with animation
See the Pen Circular progress element using scroll-driven animation II by Temani Afif (@t_afif) on CodePen.
Related: Progress element with a tooltip