“Android L”加载微调器 CSS答案

【问题标题】："Android L" Loading Spinner CSS“Android L”加载微调器 CSS
【发布时间】：2014-08-22 13:01:06
【问题描述】：

在查看了 Google 的新 /design 之后，我想知道是否有任何方法可以使用 HTML / CSS 完成类似 /progress-activity 下的加载微调器（向下滚动到“循环”）？

我只是在谈论动画本身。据我所知，几乎不可能像 Google 那样绕过微调器的边界。

我只设法制作了这个微调器的一个非常（非常）简单的版本，但我不知道如何为“边框”本身设置动画（就像最新版本的 Android 中的微调器）。基本上我只是使用了border / border-radius: 50%; 和一个无限的 CSS 动画来旋转 HTML 元素（0deg -> 360deg）：http://codepen.io/anon/pen/mqiCf

或者我必须使用“老式”.gif 来获得类似于“Android L”微调器的东西吗？

【问题讨论】：

一切皆有可能，但这一次将非常困难。我看到你已经很接近了 - 为什么不在蓝色圆圈的顶部添加一个白色圆圈以控制蓝色圆圈的大小（尽管这只适用于白色背景）？你知道，白色的会像橡皮擦一样工作。

标签： html css

【解决方案1】：

我现在没有时间做一个更好的例子，但这更接近一点。我尝试了 Shomz 在评论中所说的关于在蓝色装载机上使用白色装载机的方法。这并不完美，但可以稍微调整一下时机。

http://codepen.io/anon/pen/bBKJe

【讨论】：

谢谢，我稍微修改了你的笔，并使用了两个相互重叠的半圆。它很相似，但不幸的是重叠不会真正“擦除”颜色：codepen.io/anon/pen/cwzvK
你有时间了，如果你能让白色的半圆比蓝色的稍宽，它会照顾边缘。

【解决方案2】：

我认为使用 SVG 实现是可能的，只要您的目标浏览器支持所需的动画。

我会使用两个组件：一开始部分不透明的“成长圈”效果是一个元素，而旋转的圆形轮廓是第二个元素。

使用 HTML 无法实现的方面是圆弧的长度发生变化。在 SVG 中，您可以通过使用动画笔划破折号数组来实现这一点。 Here's an example of that.

【讨论】：

谢谢，好主意，可能比只使用 HTML / CSS 更好。我认为浏览器对 SVG 的支持甚至比我对 CSS 动画的支持还要好。虽然还没有使用 SVG，所以我首先需要看看它。
如果您是第一次接触 SVG，您可能会发现学习曲线陡峭。不过，这是一个让您入门的基本圈子：<svg><circle cx="15" cy="15" r="13" fill="none" stroke="black" /></svg>
我知道这是不久前被问到的，但这里有一个 HTML、SVG 和 CSS 版本的微调器。我试图让它尽可能接近。 codepen.io/nrdobie/pen/jqswe
@Nick 干得好！我当时没有考虑，但触发“解开”效果结束旋转器是另一个挑战。可能需要 Web Animations API。