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);
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.
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/
ps - Fontello 的一个好处是它可以让你手动选择你想要的字符，然后你下载一个 zip 文件，其中包含你需要的精简字体文件和 css。要使用 animate-spin 类，请务必包含/使用animation.css 文件。
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.
发布评论
评论（5）
我最近切换到支持 Alpha 通道透明度的 PNG 精灵：
尽管它们需要一个微小的 javascript 循环来更改背景图像的偏移量，但我发现它们非常有用，尤其是当提交（POST）表格至服务器（正常 GIF 的动画在这种情况下通常会停止）。此外，旧版浏览器比旋转或绘制自定义元素更好地支持它。
示例： http://jsfiddle.net/Ekus/dhRxG/
I recently switched to PNG sprites that support alpha channel transparency:
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.
Example: http://jsfiddle.net/Ekus/dhRxG/
这是因为要使它们看起来不错，您需要 alpha 透明度（即每个像素的部分透明度），GIF 格式（浏览器中唯一支持的常见动画图像格式）仅支持二进制透明度（每个像素为 100 %不透明或透明）。
我为 GIF 提出的唯一解决方案是根据背景颜色即时生成加载程序 - 即使这样它也无法处理非纯色。
最好的解决方案是使用不需要 alpha 透明度的动画（Facebook 的三个块就是一个很好的例子），或者尝试一种基于 CSS3/Javascript/Canvas 的奇特新旋转器 - 因为这些动画是通过实际移动来实现的（即旋转）单帧，它可以是具有 alpha 透明度的 PNG。
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.
尝试使用 http://spiffygif.com
他们的 docs 提供了解决此问题的解决方案
Try using http://spiffygif.com
The halo feature described in their docs provides a workaround solution to this problem
同时，由于 CSS 动画支持变得越来越可用，这里有一组令人印象深刻的 10 个仅 CSS 加载指示器：
http://tobiasahlin.com/spinkit/
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/
使用字体。
代码看起来像这样，使用 CSS 旋转字体的单个字符：
查看 Fontello 获取“图标”字体。例如，以下是字体“Fontelico”中提供的一些很好的“可旋转”字符：
使用字体还可以让您非常轻松地设置大小、颜色和透明度（只是 CSS）。它被渲染为矢量图形，因此无论大小如何，您总是会获得干净的边缘。相当不错。
ps - Fontello 的一个好处是它可以让你手动选择你想要的字符，然后你下载一个 zip 文件，其中包含你需要的精简字体文件和 css。要使用 animate-spin 类，请务必包含/使用animation.css 文件。
Use a font.
The code will look something like this, using CSS to rotate a single character of a font:
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.