Dave Rupert 向我们展示了如何使用一小段脚本以及stroke-dasharray和stroke-dashoffset属性来为SVG中的径向进度条制作动画。
在一个客户项目中，我们任务自己构建一个很酷的径向进度条。过去，我们使用过基于画布的完整图表库（156k/44k gzip），但这似乎有点大材小用。我查看了Airbnb的Lottie项目，您可以在其中将After Effects动画导出为JSON。这对于复杂的动画来说很酷，但对于一个微型动画来说，依赖项似乎太重了（248k/56k gzip）。
像往常一样，我尝试使用最小的自定义SVG、CSS动画和一小段JavaScript（约223b gzip）来实现。我对结果感到满意。
这是一个其他示例 Jeremias Menichelli 在CSS-Tricks上发布了这个例子，并增加了将其作为React和Vue组件的额外内容。