logo标签列表

我可以帮你找到一个好的透明的ajax加载图标吗？

ajaxspinner
25

我正在寻找一个漂亮的透明ajax加载图标，该图标在任何背景下看起来都很好。我已经去了ajaxload.info和其他各种生成器网站，但是它们在暗色背景上都不好看。有人知道哪里可以获取到透明的加载图标吗？

5个回答
20

我最近改用支持 alpha 透明通道的 PNG 雪碧图：

示例 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/

4
这对我非常有效。如果其他人不清楚的话，preloaders.net可以让你将旋转器下载为精灵图，只需事先选择APNG，然后在生成图像后选择“下载为精灵图”选项即可。 - user967451
16

这是因为要使它们看起来好看，需要Alpha透明度（即每个像素的部分透明度），而GIF格式（浏览器支持的唯一常见动画图像格式）只支持二进制透明度（每个像素要么完全不透明，要么透明）。

我想到的关于GIF的唯一解决方案是根据背景颜色动态生成加载器 - 即使如此，它也无法处理非纯色。

最佳解决方案是使用不需要Alpha透明度的动画（Facebook的三块就是一个很好的例子），或者尝试使用一些新的基于CSS3/Javascript/Canvas的炫酷旋转图标 - 因为这些图标通过实际移动（即旋转）单个帧进行动画处理，所以可以使用带有Alpha透明度的PNG格式。

9
4
令人失望，没有透明背景选项... - SaurabhLP
2
@SaurabhLP，正如Sean所提到的，这是有意为之的。在他们的文档中，Spiffygif认为光晕效果比糟糕的GIF透明度更美观。http://spiffygif.com/docs/ - Gajus
@SaurabhLP - 在 spiffygif 中，透明旋转图标是一种选项，您只需选择PNG作为文件类型即可。这里有一个例子。这是如何为sprite添加动画效果的：http://codepen.io/sdholbs/pen/GyEDw - Sean
Halo函数解决了我的问题，我之前有一个图像背景。 - unloco
7
5

使用字体。

代码将类似于以下内容，使用CSS旋转字体的单个字符：

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

请查看Fontello，以获取“图标”字体。例如，在“Fontelico”字体中提供了一些好的“可旋转”的字符：

font spinners

使用字体也让您可以非常轻松地设置大小、颜色和透明度（只需CSS）。并且它被渲染为矢量图形，因此无论大小如何，都会获得清晰的边缘。相当不错。

ps - Fontello的一个好处是，它允许您手动选择所需的字符，然后下载一个包含简化字体文件和所需CSS的zip文件。要使用animate-spin类，请确保包含/使用animation.css文件。

由于其中一些字体是开源的，理论上您可以修改它们，使其包含旋转的“spinner”。然后，您可以在DOM中的某个字符处递增以实现动画效果。 - kralyk
@kralyk，你只需要一个单一的字符。你可以使用CSS动画来旋转这个单一的字符。这正是animate-spin类所做的事情。Fontello甚至为你提供了所需的CSS。 - broc.seib
据我所知，IE9不支持这个功能。 - kralyk
@kralyk 是的，IE9不支持CSS的animation和transform。请参考我之前关于这个限制的评论。 - broc.seib
@broc.seib 好吧，这就是我建议使用多个字符的原因，因为它也适用于旧版浏览器 ：D ...不要紧... - kralyk
显示剩余4条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接