Waiting, Patiently

I would like to introduce the "works in all browsers" javascript spinner solution. There are tons of cool new spinner solutions out there, but most of them are using CSS3 which isn't yet supported in all browsers, a canvas solution which either has poor IE support, or requires a separate polyfill plugin. Why can't it be simpler?

jQuery Waiting

jQuery Waiting is a small plugin with a wide range of support, easy to use, and very powerful. It is smaller than many less powerful solutions. It also provides a handy api and event system, so you can interact with it! Best of all it leaves the CSS to style, and uses javascript to animate. Lets take a look at how this works. We have a simple empty div:

<div id="mySpinner"></div>

Add a little simple, widely accepted css (of course you can use fancy CSS3 effects if you want, thats up to you):

.waiting{ padding: 0; display: inline-block; }
.waiting-element{ margin: 0 2px 2px 0; background-color: #ccc; 
    width: 10px; height: 20px; display: inline-block;}
.waiting-play-0{ margin-bottom: 0; background-color: #999; }
.waiting-play-1{ margin-bottom: 1px; background-color: #aaa; }
.waiting-play-2{ margin-bottom: 2px; background-color: #bbb; }

And just initialize the waiting plugin:

    elements: 10, 
    auto: true 

And we should see the following:

Jquery Waiting Spinner

Ok, granted, that is pretty simple, but you know you like circle spinners. This is where it gets real difficult. We're going to add a radius option. Again, a simple empty div:

<div id="mySpinner"></div>

We'll use a little different css this time, so we'll change the class names:

.waiting-circles{ padding: 0; display: inline-block; 
    position: relative; width: 60px; height: 60px;}
.waiting-circles-element{ margin: 0 2px 0 0; background-color: #e4e4e4; 
    border: solid 1px #f4f4f4;
    width: 10px; height: 10px; display: inline-block; 
    -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}
.waiting-circles-play-0{ background-color: #9EC45F; }
.waiting-circles-play-1{ background-color: #aEd46F; }
.waiting-circles-play-2{ background-color: #bEe47F; }

We'll change the className to match our css, and tell it how large of a radius:

    className: 'waiting-circles', 
    elements: 8, 
    radius: 20, 
    auto: true 


The best part of all this is you don't need to generate separate gif images for every different size spinner. You can change all your colors, sizes, styles with simple css.

Where can you get it?

You can find all the different options, methods, and events on the jQuery Waiting Documentation. If you're ready to download it, fork it, or report an issue, head over to the jQuery Waiting on Github.