DEV Community

loading...

Single element circle progress loader

grossconstantin profile image Constantin Groß ・1 min read

A circle progress loader for modern browsers, using only a single element and no SVG. Making use of CSS variables, mask-image and conic-gradient. The only downside is that there's no smooth transition on the outer ring. (But you could use two variables for the actual progress with decimals and a rounded value for display and update the progress more frequently.)

Discussion (2)

pic
Editor guide
Collapse
lexlohr profile image
Alex Lohr • Edited

For improved accessibility, consider using either the <progressbar> tag or the role="progressbar" and in any case aria-live="polite" in order not to broadcast every single update on screen readers.

Collapse
grossconstantin profile image
Constantin Groß Author

Thanks for the valuable input, Alex! I updated the CodePen and I'm going to look into aria-live right away – I didn't even know about it!