我在哪里可以找到一个像样的透明 ajax 微调器？ [关闭]答案

【问题标题】：Where can I find a decent transparent ajax spinner? [closed]我在哪里可以找到一个像样的透明 ajax 微调器？ [关闭]
【发布时间】：2011-11-16 16:24:16
【问题描述】：

我正在尝试找到一个在任何背景下看起来都不错的像样的透明 ajax 微调器。我访问了 ajaxload.info 和其他各种生成器站点，但它们在深色背景下都不好看。有谁知道我在哪里可以得到一个透明的微调器？

【问题讨论】：

标签： ajax spinner

【解决方案1】：

这是因为要使它们看起来不错，您需要 alpha 透明度（即基于每个像素的部分透明度），GIF 格式（浏览器中唯一支持的常见动画图像格式）仅支持二进制透明度（每个像素100% 不透明或透明）。

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

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

【讨论】：

【解决方案2】：

尝试使用http://spiffygif.com

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

【讨论】：

令人失望，没有透明背景的选项...
@SaurabhLP，正如肖恩所说，这是故意的。 Spiffygif 在他们的文档中认为，光环效果比糟糕的 GIF 透明度更美观spiffygif.com/docs
@SaurabhLP - 透明微调器是 spiffygif 上的一个选项，您只需选择 PNG 作为文件类型。 Here's an example。以下是您如何为精灵设置动画：codepen.io/sdholbs/pen/GyEDw
Halo 函数解决了我有图像背景的问题

【解决方案3】：

我最近切换到支持 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/

【讨论】：

这对我来说效果很好。如果其他人不清楚，preloaders.net 允许您将微调器下载为精灵，只需在生成图像后预先选择 APNG 和“下载为精灵”选项即可。

【解决方案4】：

使用字体。

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

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

查看Fontello 以获得“图标”字体。例如，以下是“Fontelico”字体中提供的一些不错的“可旋转”字符：

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

ps - 关于 Fontello 的一个好处是它可以让您手动选择您想要的字符，然后您下载一个包含精简字体文件和所需 css 的 zip 文件。要使用 animate-spin 类，请务必包含/使用 animation.css 文件。

【讨论】：

这只适用于 HTML5 浏览器吗？
它使用 CSS animation 和 transform 旋转字符。对animation 属性的支持将是最大的限制因素，需要IE10 或更高版本。请参阅：caniuse.com/#feat=css-animation。
另外，这里是用于旋转的实际 CSS。这是您下载字体时 fontello 提供的代码。 gist.github.com/bseib/7aeef710afe21f8cf2f6
这是我最喜欢的方法，至少在现代浏览器中是这样。也可以使用免费的fontawesome icons。
由于其中一些字体是开源的，理论上你可以修改它们，使它们包含微调器的旋转。然后，您可以在 DOM 中的某处增加一个字符以实现动画。

【解决方案5】：

同时，由于 CSS 动画支持变得越来越可用，这里有一组令人印象深刻的 10 个纯 CSS 加载指示器： http://tobiasahlin.com/spinkit/

【讨论】：