环形进度条在网上很多都是基于jQuery实现的，如果在不使用jQuery的情况下，仅用js+css如何实现环形进度条呢？
光阴似箭催人老，日月如移越少年。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body { font-family: "微软雅黑"; } .circle { width: 200px; height: 200px; position: absolute; border-radius: 50%; background: #0cc; } .pie_left, .pie_right { width:200px; height:200px; position: absolute; top: 0;left: 0; } .left, .right { width:200px; height:200px; background:#00aacc; border-radius: 50%; position: absolute; top: 0; left: 0; } .pie_right, .right { clip:rect(0,auto,auto,100px); } .pie_left, .left { clip:rect(0,100px,auto,0); } .mask { width: 150px; height: 150px; border-radius: 50%; left: 25px; top: 25px; background: #FFF; position: absolute; text-align: center; line-height: 150px; font-size: 20px; font-weight: bold; color: #00aacc; } </style> </head> <body> <p class="circle" style="left:0"> <p class="pie_left"><p class="left"></p></p> <p class="pie_right"><p class="right"></p></p> <p class="mask"><span>0</span>%</p> </p> <script type="text/javascript"> //addPercent(30); function addPercent(num){ if(num>100)return; var c=document.getElementsByClassName("circle")[0]; c.getElementsByTagName("span")[0].innerHTML=num; num=num*3.6; if(num<=180){ c.getElementsByClassName("right")[0].style.transform="rotate(" + num + "deg)"; }else{ c.getElementsByClassName("right")[0].style.transform="rotate(180deg)"; c.getElementsByClassName("left")[0].style.transform="rotate(" + (num - 180) + "deg)"; } } var count=0; var t=setInterval(function(){ if(count>100){ clearInterval(t); } addPercent(++count); },200); </script> </body> </html>
这个随便找个就能翻译成js的。。还有就是我简单翻译了一下没有封装，没有管怎么调用
可以参考一下w3cplus的这篇文章：用CSS和SVG制作饼图
环形的话饼图内遮个小圆就可以了哈。
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
这个随便找个就能翻译成js的。。还有就是我简单翻译了一下没有封装，没有管怎么调用
可以参考一下w3cplus的这篇文章：用CSS和SVG制作饼图
环形的话饼图内遮个小圆就可以了哈。