Android Holo在CSS中加载微调器

Question

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

如何在没有图像的情况下在CSS中执行此操作？

Answer 1

如果没有图像，我似乎无法做到。

我设法使用as defined in AOSP和outer渐变的两个图像真实复制了Holo微调器inner。 Here's a fiddle.

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

更新我没有拍照，是的！ Check out the fiddle.

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

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

对于小型旋转器 - 这是通常的用例 - 它工作正常，看起来很棒！

Answer 2

演示

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

我可以用纯CSS获得旋转效果。更高级的效果是可能的（见下文），但限制因素是该技术依赖于矩形剪切区域。

_{你应该在Chrome，IE10，FF中看到这个（当然是动画的）。 IE9看起来正确但不会动画。 Safari需要slightly modified版本。}

Sandbox用于更精细的效果（仅限webkit，更接近于已接受的答案）：http://jsfiddle.net/7cGc3/5/

---

代码

_{为简洁起见，省略了供应商前缀。}

<强> HTML

HTML非常简单。

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

<强> CSS

这里的重要部分是border-radius，clipping和动画。

.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);
    }
}