Animated SVG loading Icons

I have very little experience working with SVG on the web so far. I thought this would be a good way to dip my toe in and try to learn a little. So here is my take on the ubiquitous three dots loading Icon…

A bunch of inline SVGs, animated with CSS (I still haven’t decided which I want to use):

See the Pen SVG CSS Loading Icons (dots) by IpsumLorem16 (@ipsumlorem16) on CodePen.

On Accessibility:

I always try to consider accessibility when creating elements or widgets. And having a blank page with a visual loading icon just doesn’t cut it. You can add a few things to help:

Adding role="status" to the SVG element appears appropriate: https://www.w3.org/TR/wai-aria-1.1/#status

Including <title> and <desc> elements (add before other elements) and also linking them via aria-labelledby. For better support (see links at bottom)

I also set pointer-events:none, just to stop the title showing as a tooltip, because I don’t think it is necessary in this instance.

Resources on making accessible SVGs:

If you also want to learn about making and using SVGs on the web I found a great post, full of great links on everything you need to know here: https://www.webdesignerdepot.com/2015/01/the-ultimate-guide-to-svg/

Also try this for an easy read: https://svgontheweb.com/