我在哪里可以找到一个像样的透明 ajax 微调器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7411029/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Where can I find a decent transparent ajax spinner?
提问by espradley
I am trying to find a decent transparent ajax spinner that looks good on any background. I've gone to ajaxload.info and other various generator sites, but none of them look good on a dark background. Anyone know where I can get a TRANSPARENT spinner?
我试图找到一个体面的透明 ajax 微调器，在任何背景下看起来都不错。我已经访问了 ajaxload.info 和其他各种生成器站点，但它们在深色背景下都不好看。有谁知道哪里可以买到透明微调器？
采纳答案by Davey Shafik
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).
这是因为要使它们看起来不错，您需要 alpha 透明度（即基于每个像素的部分透明度），GIF 格式（浏览器中唯一支持的常见动画图像格式）仅支持二进制透明度（每个像素为 100 % 不透明或透明）。
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.
我为 GIF 提出的唯一解决方案是根据背景颜色动态生成加载器——即使这样它也不适用于非纯色。
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.
最好的解决方案是使用不需要 alpha 透明度的动画（Facebook 的三个块就是一个很好的例子），或者尝试使用一种基于 CSS3/Javascript/Canvas 的精美新微调器——因为那些动画是通过实际移动（即旋转）单个帧，它可以是具有 alpha 透明度的 PNG。
回答by Ekus
I recently switched to PNG sprites that support alpha channel transparency:
我最近切换到支持 alpha 通道透明度的 PNG 精灵：
(generated using http://preloaders.net/)
（使用http://preloaders.net/生成）
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.
尽管它们需要一个微小的 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);
Example: http://jsfiddle.net/Ekus/dhRxG/
回答by Sean
Try using http://spiffygif.com
The halo feature described in their docsprovides a workaround solution to this problem
他们的文档中描述的 halo 功能为此问题提供了一种解决方法
回答by Steven De Groote
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 动画支持变得越来越可用，这里有一组令人印象深刻的 10 个仅 CSS 加载指示器：http: //tobiasahlin.com/spinkit/
回答by broc.seib
Use a font.
使用字体。
The code will look something like this, using CSS to rotate a single character of a font:
代码看起来像这样，使用 CSS 旋转字体的单个字符：
<i class="icon-spin3 animate-spin"></i>
Check out Fontelloto get an "icon" font. For example, here are some good "spin-able" characters offered in the font "Fontelico":
查看Fontello以获取“图标”字体。例如，以下是字体“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.
使用字体还可以让您非常轻松地设置大小、颜色和透明度（它只是 CSS）。它被渲染为矢量图形，因此无论大小如何，您都将始终获得干净的边缘。相当不错。
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.
ps - Fontello 的一个好处是它可以让您手动选择您想要的字符，然后您下载一个包含精简字体文件和您需要的 css 的 zip 文件。要使用 animate-spin 类，请确保包含/使用 animation.css 文件。
