css实现圆形进度条

css实现圆形进度条

先来看一下效果图：

具体实现步骤：

1. 先画一个大圆，底色为#ffffff;
   

 <div class="third"> </div>

.third{
    background-color: #FFFFFF;
    width: 182px;
    height: 182px;
    border-radius: 50%;
    position: relative;
}

2. 再画一个浅绿色的圆和一个与与第一个圆一样的圆
   

<div class="third">
           <div class="second"></div>
           <div class="first"></div>
</div>

.second{
    background-color: #6ED4BF;
    width: 182px;
    height: 182px;
    border-radius: 50%;
    clip:rect(0,91px,auto,0);
    position: absolute;
}
.first{
    background-color: #FFFFFF;
    width: 182px;
    height: 182px;
    border-radius: 50%;
    clip:rect(0,auto,auto,91px)；
}

3.将second圆根据百分比旋转

.second{
    background-color: #6ED4BF;
    width: 182px;
    height: 182px;
    border-radius: 50%;
    clip:rect(0,91px,auto,0);
    position: absolute;
    transform: rotate(30deg);  //旋转30度
}

4. 最后再画一个小圆，写上百分比
   

 <div class="third">
          <div class="second"></div>
          <div class="first"></div>
          <div class="mask">
               <span>68%</span>
          </div>
  </div>

.third *{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

这样圆就是在中心了

.mask>span{
    display: block;
    font-size: 44px;
    color: white;
    line-height: 150px;
}