CSS中的Android Holo加载微调器答案

【问题标题】：Android Holo loading spinner in CSSCSS中的Android Holo加载微调器
【发布时间】：2015-03-18 00:21:40
【问题描述】：

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

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

【问题讨论】：

如何使用 css 制作图像？似乎不可能。它必须是 GIF 图片..
我不能用 CSS 制作图片，但这并不是“真的”不可能，你可以使用 base64 来显示没有图片的图片，只用 CSS 或 HTML 来显示它，但我需要什么现在，它正在使用 CSS 制作 Android Holo 微调器（类似于图片但动画的）而不使用图像
base64 是指 SVG，我认为它是为图形而不是为样式而不是设计图像而制作的 CSS。但它可能是可能的。没有什么是不可能的。
这个问题怎么能存活这么久？这太宽泛了，OP 完全没有表现出自己解决问题的努力。

标签： css

【解决方案1】：

如果没有图片，我似乎也做不到。

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

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

更新我开始工作时没有图像，耶！ Check out the fiddle.

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

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

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

【讨论】：

更新了我的答案，现在实际上没有图像了！ :-)
很好，为无图像解决方案 +1。
@MattiasBuelens 奖励你，你应得的 :)
@Mr.Alien 谢谢，不胜感激！现在去好好利用这个微调器。 :-)
@MattiasBuelens 我暂时不会使用它，但创新者应该因为他们所取得的成就而获得一些礼物；）

【解决方案2】：

演示

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

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

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

沙盒以获得更精细的效果（仅限 webkit，更类似于接受的答案）：http://jsfiddle.net/7cGc3/5/

代码

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

HTML

HTML 非常简单。

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

CSS

这里的重要部分是边框半径、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);
    }
}

【讨论】：

F*** 太棒了：D 我已经为你投票了，但我也会给你奖励 :)
谢谢。您的动画代码很有帮助...诀窍是找到一种仅使用边框（无图像）的方法。
这非常接近，但它不是“真正的”Holo 微调器。看看my fiddle，你会发现它是一个更复杂的动画。不幸的是，我不知道没有图像怎么能做到这一点。
@TimMedora 谢谢，我无法弄清楚弧线的东西
@MattiasBuelens - 我的实际小提琴具有适当的供应商前缀；我通过稍微修改标记来修复 Safari（刚刚更新了我的答案）。我将看看仅使用 CSS 复制您的动画。