在CSS中的Android Holo加载旋转 [英] Android Holo loading spinner in CSS

问题描述

我需要知道如何使Android Holo加载旋转器在CSS没有图像。我试过，但我不知道我该怎么做。这是我需要的（动画，像在Android中）：

I need to know how can I make the Android Holo loading spinner in CSS without images. I've tried, but I don't know how can I do it. This is what I need (animated, like in Android):

如何在没有图片的CSS中执行？

How can I do it in CSS without images?

推荐答案

我似乎没有图像也没有。

I can't seem to do it without images either.

我设法对Holo微调器进行真正的复制在AOSP中定义，只需两个图像外部和内部渐变。 这是一个小提琴。

I managed to make a true replication of the Holo spinner as defined in AOSP with just two images for the outer and inner gradients. Here's a fiddle.

问题是这两个图像极性梯度：它们从0°处的一种颜色开始，当环绕圆时逐渐融合成第二种颜色。在0°处有两种颜色相遇的明显的颜色变化。我不知道是否有任何方法在CSS中使用线性梯度 s或径向梯度 s。

The problem is that those two images have a "polar" gradient: they start from one color at 0° which gradually blends into a second color when going around the circle. There's a sharp color change at 0° where the two colors meet. I don't know if there's any way to create such gradient in CSS using just linear-gradients or radial-gradients.

UPDATE 我无法使用图片，yay！ 查看小提琴。

UPDATE I got working with no images, yay! Check out the fiddle.

我使用两个近似的每个极坐标梯度线性梯度的一半。此方法的一些缺点：

I approximated each polar gradient using two halves of a linear gradient. Some disadvantages of this approach:

• 颜色褪色不完美。


• 有一个小毛刺，两个半边在底部相遇，因为它们对同一水平线上的点给出稍微不同的颜色。

对于小型纺纱机 - 这是通常的使用情况 - 它工作正常罚款，看起来不错！

For small spinners - which is the usual use case - it works just fine and it looks great!

这篇关于在CSS中的Android Holo加载旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！