利用css3动画和border来实现圆形进度条_html/css_WEB-ITnose
程序员文章站
2022-03-17 12:29:38
...
最近在学习前端的一些知识，发现border的功能十分强大啊!
首先来看看demo
就是这么一个圆形的进度条，在文本框中输入0-100的数值下面的进度条相应的转到多少
这个主要是利用border，旋转和css动画来实现的，主要思想是利用两个div来互相遮挡border形成的一个只有半圈有颜色的圆形，再利用旋转div的角度来调整显示
上代码：
html+css+js(这里引入了jquery)
圆形进度条 0%