Android Holo在CSS中加载微调器

Question

我需要知道如何在没有图像的CSS中使用Android Holo加载微调器.我试过了,但我不知道怎么办呢.这就是我需要的东西(动画,就像在Android中一样):

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

Answer 1

没有图像,我似乎无法做到这一点.

我设法对AOSP中定义的Holo微调器进行了真正的复制,只有两个图像用于外部和内部渐变.这是一个小提琴.

问题是这两个图像具有"极性"梯度:它们从0°处的一种颜色开始,当围绕圆圈时逐渐融合成第二种颜色.在0°处有两种颜色相遇的颜色变化很明显.我不知道是否有任何方法可以使用linear-gradients或radial-gradients 在CSS中创建这样的渐变.

更新我没有图像,耶!看看小提琴.

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

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

对于小型旋转器 - 这是通常的用例 - 它工作得很好,看起来很棒!

Answer 2

演示

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

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

_{你应该在Chrome,IE10,FF中看到这个(当然是动画的).IE9看起来正确但不会动画.Safari需要稍加修改的版本.}

Sandbox用于更精细的效果(仅限webkit,更接近于已接受的答案):http://jsfiddle.net/7cGc3/5/

码

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

HTML

HTML非常简单.

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

CSS

这里重要的部分是边界半径,剪裁和动画.

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