我在哪里可以找到一个像样的透明ajax微调器？

Question

我正在努力寻找一个在任何背景上看起来都不错的透明的ajax微调器。我去了ajaxload.info和其他各种发电机站点，但在黑暗的背景下它们都不好看。任何人都知道我可以在哪里获得TRANSPARENT微调器？

Answer 1

我最近切换到支持Alpha通道透明度的PNG精灵：

（使用http://preloaders.net/生成）

即使他们需要一个微小的javascript循环来改变背景图像的偏移量，我发现它们非常有用，特别是在向服务器提交（POST）表单时（正常GIF的动画在这种情况下经常停止）。此外，传统浏览器支持它比旋转或绘制自定义元素更好。

    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);

示例：http://jsfiddle.net/Ekus/dhRxG/

Answer 2

这是因为为了让它们看起来很好你需要alpha透明度（即每个像素的部分透明度），GIF格式（浏览器支持的唯一常见动画图像格式）仅支持二进制透明度（每个像素）是100％不透明或透明的。）

我为GIF提出的唯一解决方案是根据背景颜色动态生成加载器 - 即使这样也无法使用非纯色。

最好的解决方案是使用不需要透明度的动画（Facebook的三个块就是一个很好的例子），或尝试使用其中一个新的基于CSS3 / Javascript / Canvas的旋转器 - 因为那些动画由实际上移动（即旋转）单个帧，它可以是具有alpha透明度的PNG。

Answer 3

尝试使用http://spiffygif.com

docs中描述的光环功能提供了解决此问题的解决方法

Answer 4

与此同时，由于CSS动画支持越来越多，这里有一组令人印象深刻的10个CSS加载指标： http://tobiasahlin.com/spinkit/

Answer 5

使用字体。

代码看起来像这样，使用CSS来旋转字体的单个字符：

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

查看Fontello以获得＆＃34;图标＆＃34;字体。例如，这里有一些好的＆＃34;可旋转＆＃34;字体提供的字符＆＃34; Fontelico＆＃34;：

使用字体还可以非常轻松地设置大小，颜色和透明度（它只是CSS）。并且它被渲染为矢量图形，因此无论大小如何，您都将获得干净的边缘。非常好。

ps - 关于Fontello的一个好处是，它可以让你手工挑选你想要的字符，然后你下载一个zip文件，其中包含你需要的精简字体文件和css。要使用animate-spin类，请确保包含/使用animation.css文件。