My blog rocks, and yours doesn't!

Beautiful PNG Wait Indicator with Raphaël and jQuery

Posted by on April 16, 2010

Can you believe that in 2010 we are still stuck  with using animated gif’s?  They support transparency, but not the alpha-channel.  So when you need to create a wait indicator that won’t have a specific background, you’re stuck with a pixelated look.

Recently, I wanted to create a beautiful wait-indicator to display while AJAX was loading.  I wanted to use PNG, but animated PNG’s don’t have wide support yet. Furthermore, PNG’s are fairly large, so an animated one would be orders of multitude larger.  I thought, “This is silly.  This is the image I want. ROTATE IT!”.  Seriously, what year is this?  1996?!

Enter Raphaël:

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

Raphaël uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.

Raphaël currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.

Raphaël is able to take images and apply transforms on them by utilizing SVG—meaning I can take my pretty little static png, and rotate.  Set that bad boy on a timer, and suddenly I’ve got an animation.

My goal for this demo was to be able to stick a static <img/> into the DOM, and then call a method to set it spinning:

$('img').spin();

The spinner itself is only 1 image, and the background is a separate image.  The heavy lifting of creating the spinning animation is done with Raphaël, and the wiring up of all the events and objects is accomplished with ease through jQuery.

Download the source: beautiful-wait-indicator.zip, or view demo in a new window.

You’ll notice in the source of the demo that the usage is pretty straight-forward:

$('img').spin(); //start with default options

$('img').spin('stop'); //stop the spinner

$('img').spin({ speed: 500 }); //start with a faster speed (milliseconds per rev)

I’d like to talk more about it, but… well, I hate writing.  Message me, @andyedinborough if you want more info.