by Marcel Wijnands
28. August 2010 16:06
I know of two cases where you would want an animated GIF, but it won’t do the trick:
- Browsing the web using an Android phone.
- Showing some kind of “processing..” animation when clicking a link/button and make it work in Internet Explorer.
I created an alternative using some images and a piece of javascript, and turned it into a jQuery plugin.
What you need is images like these:

Name them like:
circleball-1.png, circleball-2.png … circleball-8.png
Put a container on your page, like a span or a div, and use the plugin like this:
$(".circleball").animateImages("/images/circleball-@.png", 8, 90);
In the above line, the @ gets replaced with the imagenumbers, 8 means there are 8 images, 90 means the animation-interval is 90 ms.
You can check out a working example here! This could be optimized to use sprites instead, but it's a start.
jquery.animateImages can be downloaded below;
jquery.animateImages.zip (1.01 kb)