css实现圆形进度条

css实现圆形进度条

先来看一下效果图：

具体实现步骤：

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

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

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

.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. 最后再画一个小圆，写上百分比
   

 

          

          

          

               68%
          
  

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

这样圆就是在中心了

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