Where can I find a decent transparent ajax spinner? [closed]

Question

I am trying to find a decent transparent ajax spinner that looks good on any background. I've gone to ajaxload.info and other various generator sites, but none of them look good on a dark background. Anyone know where I can get a TRANSPARENT spinner?

Answer 1

I recently switched to PNG sprites that support alpha channel transparency:

(generated using http://preloaders.net/ )

Even though they require a tiny javascript loop that changes the offset of the background image, I found them quite useful, especially when submitting (POST) forms to the server (animation of normal GIFs often stops in that case). Also, legacy browsers support it better than rotating or drawing custom elements.

    var counter = 0;     setInterval(function() {         var frames=12; var frameWidth = 15;         var offset=counter * -frameWidth;         document.getElementById("spinner").style.backgroundPosition=offset + "px 0px";         counter++; if (counter>=frames) counter =0;     }, 100); 

Example: http://jsfiddle.net/Ekus/dhRxG/

Answer 2

This is because to make them look good you need alpha transparency (that is, partial transparency on a per-pixel basis), the GIF format (the only common animated image format supported in browsers) only supports binary transparency (each pixel is either 100% opaque or transparent).

The only solution I have come up with for GIFs is to generate loaders on the fly based on the background color — even then it won't work with non-solid colors.

The best solution is to either use an animation that doesn't require alpha transparency (Facebook's three blocks is a good example of this) or try out one of the fancy new CSS3/Javascript/Canvas based spinners - because those animate by actually moving (i.e. rotating) a single frame, it can be a PNG with alpha transparency.

Answer 3

Try using http://spiffygif.com

The halo feature described in their docs provides a workaround solution to this problem