Simple Loading Spinners Animated with CSS3

Written by Kevin Liew on 16 Jan 2014
48,532 Views • Javascript

Before CSS3 transition, we see loading spinners in flash website, and then AJAX component with animated GIF. Besides, animated GIF, we have seen VML & Canvas spinners too. Now, we have pure CSS animated loaders/spinners created with just HTML markup and CSS3.

Spinkit has a collection of good looking CSS spinners:

SpinKit uses CSS animations to create smooth and easily customizable animations. The goal is not to offer a solution that works in every browser. If you're building a site with users running IE9 and below, you'll want to detect support for the CSS animation attribute, and implement a fallback animation (e.g. a GIF.)

At the moment, it has 8 minimal and simple animated spinners ready to be used.

SPECIFICATIONS & DOWNLOAD

By Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Related Articles
Cleave.js - Custom Formatting for Your Input Field Data
Add Search, Sort, Filters Easily with List.js
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

2 comments
Les 10 years ago
Hi, I love you loaders but am very new to creating web. I would like to use a loader in my Wordpress site. I have added the css and added the the html to a raw html file on a page. It works perfectly, however, how do I get the stop and disappear once the page has loaded? After all, isnt that what a loader is for?

thanks

Les
Reply
Tashfeen 10 years ago
Awesome SpinKit collection! I'd also like you to go through these CSS3 Loader CodePens I collected. I guarantee you'll love them! Go to http://starscontest.com/blog/60-css3-loaders-cherry-picked-from-codepen-io/
Reply