在渲染页面的过程中，进度条是我们最为常见的，有条形进度条，圆环进度条，圆形进度条。今天，我们就来实现一下圆形进度条。
用到的知识点：
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>
进度条，结合和时间戳，就可以很好的完成一个完美的时间进度条了。
希望今天的知识点对大家有所帮助。