手把手教你：如何实现圆形进度条
ead>theme: smartblue
我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！
关于进度条
相信大家对进度条都并不陌生，比如登录时在等待的时候，看视频的时候，都能看到进度条的身影。在 Html 中，也有专门为进度条设计的标签 < /progress>，直接使用它也是可以做出基础版进度条的。 ```
``` 基础版无样式进度条 < /progress> 如下所示：
如上所示，这样做出来的进度条是条形的。正如我们所看到的一样，大部分的进度条都是条形的。因此，我们应该对进度条的样式做出什么修改，能使它变成圆形进度条呢。
代码块
实现思路
整体实现起来其实很简单，主要是通过设置相应的动画来实现效果。
这个圆形进度条，表面上看是由一个 div 盒子变成圆形来组成，其实内部实际上是由两个 div 盒子组成，左右各一半。 ```
``
总共三个 div 盒子，父级大盒子里套了两个小盒子，并左右浮动。对左盒子上边框、左边框和右盒子上边框、右边框颜色设置透明。举个例子吧，border-top/left-color:pink;和border-bottom/right-color:green;` 属性颜色分布如下图所示:
.progress .circle {
border-radius: 50%;
width: 88px;
height: 88px;
}
.progress .left .circle {
float: left;
border: 6px solid skyblue;
border-top-color: transparent;
border-left-color: transparent;
animation: left_cirlce 5s linear infinite;
}
.progress .right .circle {
float: right;
border: 6px solid skyblue;
border-top-color: transparent;
border-right-color: transparent;
animation: right_cirlce 5s linear infinite;
}
关于动画部分，设置两个名为 left_circle 和 right_circle 的动画，来实现圆形进度条的自动滚动，并且设置linear infinite让播放速度相同且播放无限次。0%-100% 等于 from-to。0% 是动画的开始时间，50% 是动画完成一半的时间，100% 动画结束时间。
@keyframes left_cirlce {
0%,50% {
transform: rotate(-45deg);
}
100%{
transform: rotate(135deg);
}
}
@keyframes right_cirlce {
0% {
transform: rotate(45deg);
}
50%,100%{
transform: rotate(225deg);
}
}
最后，这里有个很关键的属性，就是overflow:hidden可以溢出隐藏。overflow:hidden有很多作用，比如溢出隐藏，清除浮动以及解决外边距塌陷问题。
结束语
这就是一个很简单的圆形进度条，其实还能有很多扩展的地方，比如说通过按钮点击事件来控制进度条的长度，也可以对进度条设置数值属性，在进度增加或减少的过程中数值也会发生变化，以及设置各种颜色来丰富进度条样式等等。总而言之，在这个进度条上还能有很多能够扩展的地方。感兴趣的小伙伴可以去尝试一下。