Two Simple CSS Spinner

Found two great CSS Spinner made by Lea Verou. They are simple and easy to implement :

Cleanest CSS Spinner

cleanest-css-lea-verou

 

 

 

 

 

 

Google Style Loader

google-style-loader-lea-verou

 

 

 

 

 

 

Found via Web Resources Depot

CSS3 is required for viewing. So, make sure you create backward compatible version for older browsers not supporting CSS3.

Both spinner / loader are very handy for use if you are using JQuery / javascript to load data, instead of re-loading the page or redirecting to another page.

Inside her website, Lea also describes the story behind the creation. It is not for true beginner, you need to have a basic understanding of how CSS works, to understand what she is saying. Other than that, her story is easy to understand.

Here is the link to Lea Verou website again:

From her Twitter bio :

@CSSWG Invited Expert. @OReillyMedia author (ETA 2014). Ex @W3C staff. Made @prismjs @dabblet @prefixfree. Passionate about web standards, coding, design, UX.

So, it is little wonder that she can explain and code so well. She is an expert at CSS and also at some point a member of W3C. In case you are wondering, W3C is a standard body that defines the standard for HTML, CSS and the web in general. You can visit W3C website over at www.w3c.org.