Where can I find a decent transparent ajax spinner?

espradley picture espradley · Sep 14, 2011 · Viewed 29.1k times · Source

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

Ekus picture Ekus · Oct 23, 2013

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

example PNG sprite (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/