环形表示进度 css+js+svg

先看看我做出来的效果

人狠话不多 直接上代码
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;
  }

js部分

getLatePercentageNewByJsCss(['40%','70%','0%','100%'],'#2C67E2',58,58,29)
  function getLatePercentageNewByJsCss(percentage,color,width,height,r) {
    let len = percentage.length
    let appendDom = document.getElementById('box')
    appendDom.innerHTML = ''
    let domList = []
    for (let i = 0; i < len; i++) {
        domList.push('<div class="circleBox">')
        domList.push('<div class="circleContent">')
        domList.push('<div class="bigCircle"></div>')
        domList.push(generatePieSvg(width,height,r,color,percentage[i]))
        domList.push('<div class="smallCircle">'+percentage[i]+'</div>')
        domList.push('</div>')
        domList.push('</div>')
    }
    appendDom.innerHTML = domList.join('')
}
   //画svg的方法
  function generatePieSvg(width,height,R, color,percent){
    if(percent == '0%') return ''；//0%
    if(percent == '100%'){//100%
      return `<svg width="${width}" height="${height}" style="position: absolute;z-index: 2">
            <circle cx="${R}" cy="${R}" r="${R}" stroke="${color}" stroke-width="1" fill="${color}" />
        </svg>`
    }
    //0% - 100% 扇形用svg来画
    let svg = ''
    svg += '<svg style="position: absolute;z-index: 2" width=' + width + ' height=' +height+ '  viewBox="0 0 '+ width  + " " + height + '"' +'>'
    let M = 'M '+ R +',' + R + ' '
    let L = 'L ' + R + ',' + 0  + ' '
    let Astart = 'A ' + R + ' ' + R + ' '+ 0 + ' '+ (parseInt(percent) >= 50 ? 1:0) + ' '+ 1 + ' ';//x-axis-rotation large-arc-flag sweep-flag
    // large-arc-flag 大于180时 为1  表示大圆环   sweep-flag 1 顺时针 0 逆时针
    let x = caculateX(R,percent)
    let y = caculateY(R,percent)
    let Aend = x  + ',' + y  + ' '
    let Z = 'Z'
    svg +='<path d="' + M + L + Astart + Aend + Z + '"' + ' fill=' + color +'>'+'</path>'
    svg +='</svg>'
    return svg
  }

  function caculateX(r,percent){
    if(parseInt(percent) >= 75){
      let angle = 360 - parseInt(percent) * 360 / 100
      return r - r * Math.sin(angle * Math.PI / 180)
    }else if(parseInt(percent) >= 50){
      let angle = 270 - parseInt(percent) * 360 / 100
      return r - r * Math.cos(angle * Math.PI / 180)
    }else if(parseInt(percent) >= 25){
      let angle = 180 - parseInt(percent) * 360 / 100
      return r + r * Math.sin(angle * Math.PI / 180)
    }else{
      let angle = 90 - parseInt(percent) * 360 / 100
      return r + r * Math.cos(angle * Math.PI / 180)
    }
  }
  function caculateY(r,percent){
    if(parseInt(percent) >= 75){
        let angle = 360 - parseInt(percent) * 360 / 100
        return r - r * Math.cos(angle * Math.PI / 180)
    }else if(parseInt(percent) >= 50){
        let angle = 270 - parseInt(percent) * 360 / 100
        return r + r * Math.sin(angle * Math.PI / 180)
    }else if(parseInt(percent) >= 25){
        let angle = 180 - parseInt(percent) * 360 / 100
        return r + r * Math.cos(angle * Math.PI / 180)
    }else{
        let angle = 90 - parseInt(percent) * 360 / 100
        return r - r * Math.sin(angle * Math.PI / 180)
    }
}