DEV Community

Constantin Groß
Constantin Groß

Posted on

Single element circle progress loader

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)

Collapse
lexlohr profile image
Alex Lohr • Edited on

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!