在渲染页面的过程中，进度条是我们最为常见的，有条形进度条，圆环进度条，圆形进度条。本日，我们就来实现一下圆形进度条。
用到的知识点：
1、transform：rotate；（旋转）2、animation；（动画关键帧）首先，我们创建一个box，作为父级容器，定宽定高（160px），定位（position：relative）;
.box{
width: 160px;
height: 160px;
margin: 200px auto;
position: relative;
}
圆形进度条，分为旁边两部分，利用韶光差，通过动画关键帧来达到进度效果。
接下来，我们首先实现左侧部分，创建一个div，类名为left-box，定宽定高（80px，160px）；定位（position：absolute）；
在left-box下创建一个div为子元素，类名为left-tran 和 left。接下来，设置left-tran样式。
我们要明白，进度条的实现是通过韶光差，改变边框的颜色。普通一点：便是一个div，width和height都为0px；边框宽度设为100%；然后top和left为一组，bottom和right为一组，分别设置不同的颜色。效果如下图：
接下来。将父级设置overflow：hidden。超出部分隐蔽。这样就只显示一半的边框，随后便利用transform：rotate旋转45deg，边框边圆角得到终极效果，如下图：
末了设置关键帧，不同的边框颜色就会相互转变
这样。左侧的样式就已经完成，右侧的与之相似，这里，我们就不在这里多加描述。
待完成右侧样式，两个关键帧动画相互折衷，就可以完成一个圆形进度条啦。
本日的全部代码如下：
<!DOCTYPE html><html lang=\"大众en\"大众><head> <meta charset=\"大众UTF-8\公众> <meta name=\"大众viewport\公众 content=\公众width=device-width, initial-scale=1.0\"大众> <meta http-equiv=\"大众X-UA-Compatible\"大众 content=\"大众ie=edge\"大众> <title>Document</title> <style> { padding: 0px; margin: 0px; } .box { width: 200px; height: 200px; position: relative; margin: 100px auto; box-sizing: border-box; } .left-box{ width: 100px; height: 200px; position: absolute; left: 0px; top: 0px; box-sizing: border-box; overflow: hidden; } .left-tran{ width: 0px; height: 0px; border: 100px solid; box-sizing: border-box; transform: rotate(45deg); border-radius: 50%; } .left{ border-left: 100px solid #e3e4e5; border-bottom: 100px solid #e3e4e5; animation: leftmove 10s linear infinite; } @keyframes leftmove{ 0%{ transform: rotate(45deg); } 50%{ transform: rotate(45deg); } 100%{ transform: rotate(225deg); } } .right-box{ width: 100px; height: 200px; position: absolute; top: 0px; right: 0px; box-sizing: border-box; overflow: hidden; } .right-tran{ width: 0px; height: 0px; border: 100px solid; position: absolute; top: 0px; right: 0px; transform: rotate(45deg); border-radius: 50%; } .right{ border-right: 100px solid #e3e4e5; border-top: 100px solid #e3e4e5; animation: rightmove 10s linear infinite; } @keyframes rightmove{ 0%{ transform: rotate(45deg); } 50%{ transform: rotate(225deg); } 100%{ transform: rotate(225deg); } } </style></head><body> <div class=\"大众box\"大众> <div class=\"大众left-box\"大众> <div class=\公众left-tran left\"大众></div> </div> <div class=\公众right-box\"大众> <div class=\"大众right-tran right\公众></div> </div> </div></body></html>
进度条，结合和韶光戳，就可以很好的完成一个完美的韶光进度条了。
希望本日的知识点对大家有所帮助。
