我在哪里可以找到一个像样的透明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

其文档中描述的光环功能为此问题提供了一种解决方法

Answer 4

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

Answer 5

使用字体.

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

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

查看Fontello获取"图标"字体.例如,以下是字体"Fontelico"中提供的一些好的"可旋转"字符:

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

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