Javascript

Simple Loading Spinners Animated with CSS3

Written by Kevin Liew on 16 Jan 2014
32,011 Views • Shares
2 comments

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

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 2 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 2 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