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

Closed. This question is seeking recommendations for books, tools, software libraries, and more. It does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

We don’t allow questions seeki开发者_如何学编程ng recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.

Closed 7 years ago.

Improve this 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?

---

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/

---

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.

---

Try using http://spiffygif.com

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

---

Meanwhile, since CSS animation support is becoming more and more available, here's an impressive set of 10 CSS-only loading indicators: http://tobiasahlin.com/spinkit/

---

Use a font.

The code will look something like this, using CSS to rotate a single character of a font:

<i class="icon-spin3 animate-spin"></i>

Check out Fontello to get an "icon" font. For example, here are some good "spin-able" characters offered in the font "Fontelico":

Using a font also lets you set size, color, and transparency very easily (it's just CSS). And it's rendered as a vector graphic, so you'll always get clean edges regardless of size. Quite nice.

ps - One nice thing about Fontello is that it lets you handpick which characters you want, and then you download a zip file that has the stripped down font files and the css you need. To utilize the animate-spin class, be sure to include/use the animation.css file.