环形表示进度 css+js+svg

前端小李子

于 2024-07-30 20:57:20 发布

阅读量346

点赞数 4

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/ly5926/article/details/140806596

版权

先看看我做出来的效果

人狠话不多直接上代码
html部分

<div id="box"></div>

css部分

  #box{
   
        width: 400px;
        height: 400px;
        background-color: #00E8D7;
        display: flex;
  }

  .circleBox{
   
    width: 33.333%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .circleContent{
   
    height: 58px;
    position: relative;
    width: 58px;
  }
  .circleContent + div{
   
    font-size: 14px;
    color: #333333;
    font-weight: 600;
    margin-top: 10px;
  }
  .smallCircle{
   
    font-size: 17px;
    color: #333333;
    font-weight: 600;
    text-align: center;
    width: 50px;
    height: 50px;
    line-height: 50px;
    background-color: #ffffff;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 50%;
    z-index: 3;
  }
  .bigCircle{
   
    width: 58px;
    height: 58px;
    background-color: #dbdbdb;
    position: absolute;
    border-radius: 50%;
    z-index: 1;
  }