css - CSS中的Android Holo加载微调器

Question

我需要知道如何在没有图像的情况下在 CSS 中制作 Android Holo 加载微调器。我试过了，但我不知道我该怎么做。这就是我需要的（动画，就像在 Android 中一样）：

如何在没有图像的 CSS 中做到这一点？

Answer 1

没有图像我似乎也做不到。

我成功地复制了AOSP 中定义的 Holo 微调器，只有两个图像用于外部和内部渐变。这是一个小提琴。

问题是这两个图像有一个“极性”渐变：它们从 0° 的一种颜色开始，当绕着圆圈转时逐渐混合成第二种颜色。在两种颜色相遇的 0° 处有一个急剧的颜色变化。我不知道是否有任何方法可以仅使用linear-gradients 或radial-gradients 在 CSS 中创建这种渐变。

更新我没有图像，耶！看看小提琴。

我使用线性梯度的两半来近似每个极性梯度。这种方法的一些缺点：

• 褪色并不完美。颜色沿垂直轴而不是沿角度淡化。
• 有一个小故障，两半在底部相遇，因为它们给同一水平线上的点提供略微不同的颜色。随着微调器的笔划宽度增加，这变得更加明显。

对于小型微调器 - 这是通常的用例 - 它工作得很好而且看起来很棒！

Answer 2

Demo

http://jsfiddle.net/7cGc3/4/

I can get the spinning effect with pure CSS. More advanced effects are possible (see below), but the limiting factor is that this technique relies on a rectangular clipping region.

_{You should see this (animated, of course) in Chrome, IE10, FF. IE9 looks correct but won't animate. Safari needs a slightly modified version.}

Sandbox for more elaborate effects (webkit only, more similar to accepted answer): http://jsfiddle.net/7cGc3/5/

---

Code

_{Vendor prefixes omitted for brevity.}

HTML

The HTML is extremely simple.

<div class="spinner"></div>

CSS

The important pieces here are border-radius, clipping, and animation.

.spinner{
    width: 100px;
    height: 100px;
    border-radius: 54px;
    border: 4px solid #999;
    position: relative;
}

.spinner:after {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    border: 4px solid #fff;
    border-radius: 54px;
    height: 100px;
    width: 100px;
    clip: rect(0px, 60px, 50px, 0px);

    animation: rotate 2s;  
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}