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:
- https://css-tricks.com/accessible-svgs/ (excellent article)
- https://www.sitepoint.com/tips-accessible-svg/
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/