css实现圆形进度条

最新推荐文章于 2025-04-05 22:55:22 发布

mh的63

最新推荐文章于 2025-04-05 22:55:22 发布

阅读量1.4w

点赞数 7

分类专栏： css 文章标签： html css

本文链接：https://blog.youkuaiyun.com/baidu_39048029/article/details/94413753

版权

css 专栏收录该内容

4 篇文章

订阅专栏

css实现圆形进度条

先来看一下效果图：
在这里插入图片描述
具体实现步骤：

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

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

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

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

<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度
}

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

 <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;
}