If you like animation and are looking for a way to spice up your latest project, you might want to grab a spinner from the CSS Spinners project. It’s an open source effort by myself to create a common set of pure CSS spinners. That’s right! No images to download!
The project has a range of loading indicators, from the more common three quarters spinner:
To the more advanced Google Plus loader:
There are over 15 spinners in the collection, with more to come:
One of the goals of the project is to keep the markup as simple as possible. This means each loading indicator is created with a single element:
<div class="throbber-loader"> Loading... </div>
The text inside the element is displayed by browsers that don’t support CSS animation (like IE9).
Oh, and the spinners are all coded in your favorite preprocessor, Sass! This means that you can easily customize the size and color of each spinner. Check out the Sass source files to see how easy they are to customize.
Want to contribute your own spinner to the project? Contributions are welcome! Just send me a pull request on GitHub.
Visit, www.css-spinners.com to see them all in action.