简介
实际开发中，文件的download、upload、图片的加载等情形下经常需要展示进度情况。 最简单的直接显示百分之多少即可，然后一般情况下就是条形进度条，设置长度表示已完成进度。这里介绍一下稍微复杂的圆形进度条如何实现。
先来效果图
需要了解的几个CSS知识点
transform 旋转 (这里只需要用到2d )
clip 裁剪 设置元素的一部分可视
实现步骤
整体的圆是分成两个半圆来实现的，为什么呢？因为要。。。每个圆遮住一半，不然完整的圆滚来滚去跟没滚一样。
下面只说明半圆的实现方式，最后拼在一起即可，以右半边为例一步步说明：
设圆整体区域 200px * 200px
遮住左边的100*200
{ clip: rect(0,200px,auto,100px) //不明白的先看相关资料 }
然后旋转一定的角度
{ transform: rotate(40px) //不明白语法的先找下资料 }
看上图发现，我们只要求半圆的实现，但上图已经超出右边半圆到左边区域了，到时候会覆盖左边，所以我们要把超出去的部分遮住，于是给右边半圆设置父容器，它的大小形状跟上面的半圆一样，只是它不旋转，这样就能遮住超出去的旋转半圆了。（这里我们给父容器加上底色）加上父容器后，效果如下。至此完成右边半圆的设置，在加上左边半圆，就搞定了。
Tips
具体使用时，当进度<= 50%，只有右边旋转，左边保持不动；>50%的时候，右边旋转180度，左边也旋转一定度数
旋转的进度条，除了用在圆上，矩形上也可以。一样的道理，只是把旋转的区域增大，然后用矩形来截取即可。
贴上实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆形进度条</title>
<style>
.circle-left-mask, .circle-right-mask, .circle-left, .circle-right {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
border-radius: 50%;
}
.circle-left-mask, .circle-right-mask {
background-color: pink;
}
.circle-left, .circle-right {
background-color: salmon;
}
.circle-left-mask, .circle-left {
clip: rect(0, 100px, auto, 0);
}
.circle-right-mask, .circle-right {
clip: rect(0, 200px, auto, 100px);
}
.circle-left {
/*设置左边的旋转*/
transform: rotate(0deg);
}
.circle-right {
/*设置右边的旋转*/
transform: rotate(40deg);
}
</style>
</head>
<body>
<div class="circle-left-mask">
<div class="circle-left"></div>
</div>
<div class="circle-right-mask">
<div class="circle-right"></div>
</div>
</body>
</html>
