How to create a simple CSS loading spinner & make it accessible

Since CSS animations are now so well supported using an animated .gif for a loading spinner is now no longer necessary. The mighty Developer Jon Pearse, showed me how to make a CSS loading spinner so I thought I’d share his technique using a flexible SCSS mixin step by step. This spinner will work in all modern browsers as well as in IE10+. I am presuming here you have used CSS animations before for this tutorial.

Creating the CSS spinner markup
Our spinner is going to be a simple circle spinning around it’s own centre. The spinner markup is just a single div. Our spinner is going to be a pseudo element, ::before (you could use ::after as well) of our div.

Curated by (Lifekludger)
Read full article at Source: How to create a simple CSS loading spinner & make it accessible

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: