CSS进度圆 [英] CSS Progress Circle

问题描述

我搜索过这个网站，找到进度条，但我已经找到的动画圈子可以完全100％

解决方案

我创建了一个教程，介绍如何使用CSS3和LESS JavaScript库。
您可以在这里找到博客： https://medium.com/secoya-tech/a917b80c43f9 p>

以下是最终结果的 jsFiddle 。百分比通过 data-progress 属性设置。使用CSS转换来动态更改。

I have searched this website to find progress bars, but the ones I have been able to found show animated circles that go to the full 100%

I would like that stop at certain percentages like the screenshot below, is there anywhere I can find this?

解决方案

I created a tutorial on how to do exactly that with CSS3 and the LESS JavaScript library. You can find the blogpost here: https://medium.com/secoya-tech/a917b80c43f9

Here is a jsFiddle of the final result. The percentage is set via the data-progress attribute. Changes are animated using CSS transitions.

这篇关于CSS进度圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！