环形表示进度 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.lengthlet 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 / 100return r - r * Math.sin(angle * Math.PI / 180)}else if(parseInt(percent) >= 50){let angle = 270 - parseInt(percent) * 360 / 100return r - r * Math.cos(angle * Math.PI / 180)}else if(parseInt(percent) >= 25){let angle = 180 - parseInt(percent) * 360 / 100return r + r * Math.sin(angle * Math.PI / 180)}else{let angle = 90 - parseInt(percent) * 360 / 100return r + r * Math.cos(angle * Math.PI / 180)}}function caculateY(r,percent){if(parseInt(percent) >= 75){let angle = 360 - parseInt(percent) * 360 / 100return r - r * Math.cos(angle * Math.PI / 180)}else if(parseInt(percent) >= 50){let angle = 270 - parseInt(percent) * 360 / 100return r + r * Math.sin(angle * Math.PI / 180)}else if(parseInt(percent) >= 25){let angle = 180 - parseInt(percent) * 360 / 100return r + r * Math.cos(angle * Math.PI / 180)}else{let angle = 90 - parseInt(percent) * 360 / 100return r * Math.sin(angle * Math.PI / 180)}}