Javascript 如何用HTML/CSS/JS制作半圆状的指示器来指示经过的时间？

我正在寻找一个解决方案，以了解如何为下面的图像设置动画，该图像指示所经过的时间，如下图所示。为了便于解释，我希望动画以10%的间隔进行（尽管我展示了67%的图像示例）。实际上，您在仪表中看到的彩色渐变将以不同的10%间隔显示，或者以不同的10%间隔显示，以显示更多的彩色渐变。我可以使用某种掩蔽技术来进行

或者一些CSS3转换吗？我在PhotoShop的不同层中有这个图像，所以我完全可以操纵元素。我该怎么做呢

这是67%完成时的情况：

…并100%完成：

---

有一些方法可以做到这一点

最近使用最多的是JS和canvas，但也有纯CSS3方法。 所有这些我将张贴使用一个完整的圆圈，但在您的情况下，您可以使用作为基础，并编辑他们，以您的需要

JS/Canvas：

CSS3：

---

要获得更多结果，请使用谷歌的“css径向进度条”。

如果资源在PhotoShop中，该如何处理？您可以使用css属性（渐变和阴影）从头开始重新创建它们。我认为，在项目中的这一点上，此选项将太耗时。不幸的是，您也可以使用画布来完成此操作。网上有很多这样的例子，你可以把每一层都变成背景图片。