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.)
Top comments (2)
For improved accessibility, consider using either the
<progressbar>tag or therole="progressbar"and in any casearia-live="polite"in order not to broadcast every single update on screen readers.Thanks for the valuable input, Alex! I updated the CodePen and I'm going to look into
aria-liveright away – I didn't even know about it!