最下面的bottom圆形是进度条的背景，在bottom上面有left和right两个长方形，用来覆盖不要显示的进度条。在两个长方形的里面分别有一个半圆形用来显示进度。正常情况下，使用正方形绘制出来的半圆，直径和水平下都是有45度夹角的。为了能使两个半圆刚好可以覆盖整个圆形，就需要使用css3中的rotate使原有正方形旋转，达到覆盖整个背景的效果。如下图（为了显示清楚，这里用正方形表示）： 

如图，将长方形内部的半圆向右（顺时针）旋转45度，就可以得到进度覆盖整个背景的图像。将半圆向左（逆时针）旋转135度就能得到只有进度条背景的图像。为什么又要向左旋转，而不是一直向右旋转，当然是因为要实现的效果是：进度是从顶部开始，顺时走完的。到这里，思路就很清晰了，只需要再按百分比的多少来控制左边和右边进度的显示就可以了。

实现这部分的html和css代码如下：

html代码

1.  
2. <div class="progressbar">
3.  
4. <div class="left-container">
5.  
6. <div class="left-circle"></div>
7.  
8. </div>
9.  
10. <div class="right-container">
11.  
12. <div class="right-circle"></div>
13.  
14. </div>
15.  
16. </div>

css代码:

1. .progressbar{
2.  
3. position: relative;
4.  
5. margin: 100px auto;
6.  
7. width: 100px;
8.  
9.