javascript - 如何使用 HTML/CSS/JS 为指示耗时的半圆形仪表制作动画？

Question

我正在寻找一种解决方案，以了解如何为以下图像制作动画，指示耗时，如下所示。为了便于解释，我希望动画以 10% 的间隔进行(尽管我显示的是 67% 的图像示例。)实际上，您在仪表中看到的彩色渐变会在这些位置显示并可能被隐藏不同的 10% 间隔以显示更多的彩色渐变。我可以使用某种掩蔽技术吗 <div>也许还有一些 CSS3 转换？我在 PhotoShop 中的不同图层中有此图像，因此我绝对可以操纵这些元素。我应该怎么做？

这是完成 67% 时的样子:

..并 100% 完成:

Answer 1

有一些方法可以做到。

最近用得最多的是JS和canvas，但也有纯CSS3的方法。我将发布的所有这些都使用一个完整的圆圈，但在您的情况下，您可以将其用作基础并根据您的需要进行编辑。

JS/ Canvas :

• > http://p.ar2oor.pl/cprogress/
• > http://anthonyterrien.com/knob/

CSS3:

• > http://fromanegg.com/post/41302147556/100-pure-css-radial-progress-bar
• > http://www.alessioatzeni.com/blog/css3-loading-animation-loop/

要获得更多结果，请搜索“css radial progress bar”。