1. svg实现圆形进度条
效果图：
1. 写个假接口：
let res = {curLegendList: [{ progress: "87", name: "进度1",color:"#00fe41" },{ progress: "66", name: "进度2" ,color:"orange"},{ progress: "50", name: "进度3",color:"#00fe41" },{ progress: "25", name: "进度4" ,color:"red"},{ progress: "87", name: "进度1",color:"#00fe41" },{ progress: "66", name: "进度2" ,color:"orange"},{ progress: "50", name: "进度3",color:"#00fe41" },{ progress: "25", name: "进度4" ,color:"red"},]}2. 编写css
* {margin: 0;padding: 0;box-sizing: border-box;font-family: '微软雅黑', sans-serif;}.container {width: 30px;height: 30px;}.zcy_box {position: relative;width: 250px;height: 150px;display: flex;align-items: center;background-color: darkgoldenrod;}.zcy_box .zcy_percent {position: relative;width: 150px;height: 150px;}.zcy_box .zcy_percent svg {position: relative;width: 150px;height: 150px;}.zcy_box .zcy_percent svg circle {width: 35px;height: 35px;fill: none;stroke-width: 10;stroke: #000;transform: translate(5px, 5px);stroke-dasharray: 440;stroke-dashoffset: 440;stroke-linecap: round;}.zcy_box .zcy_percent .zcy_number {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;color: #767576;}.zcy_box .zcy_percent .zcy_number h2 {font-size: 24px;}.zcy_box .zcy_percent .zcy_number span {font-size: 24px;}.zcy_box .text {font-size: 24px;padding: 10px 0 0;color: #999;font-weight: 400;letter-spacing: 1px;}3. 写个公用的js方便调用，可以自己改造
function htmlFunc(name, progress, color) {var html = '';html += '<div class="zcy_box">';html += '<h2 class="text">'+name+'</h2>';html += '<div class="zcy_percent">';html += '<div class="zcy_number">';html += '<h2>'+progress+'<span>%</span></h2>';html += '</div>';html += '<svg>';html += '<circle style="stroke-dashoffset: 0;stroke: #ccc;" cx="70" cy="70" r="40"></circle>';html += '<circle style="stroke-dashoffset: calc(440 - (440 * '+progress+')/180);stroke: '+color+';" cx="70" cy="70" r="40"></circle>';html += '</svg>';html += '</div>';html += '</div>';return html;}4. 调用js以及传数据进去
let curLegendList = res.curLegendList;var curHtml='';for(let i=0;i<curLegendList.length;i++){curHtml += htmlFunc(curLegendList[i].name,curLegendList[i].progress,curLegendList[i].color);}$(".app").html(curHtml);<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>SVG实现圆形进度条</title><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: '微软雅黑', sans-serif;}.container {width: 30px;height: 30px;}.zcy_box {position: relative;width: 250px;height: 150px;display: flex;align-items: center;background-color: darkgoldenrod;}.zcy_box .zcy_percent {position: relative;width: 150px;height: 150px;}.zcy_box .zcy_percent svg {position: relative;width: 150px;height: 150px;}.zcy_box .zcy_percent svg circle {width: 35px;height: 35px;fill: none;stroke-width: 10;stroke: #000;transform: translate(5px, 5px);stroke-dasharray: 440;stroke-dashoffset: 440;stroke-linecap: round;}.zcy_box .zcy_percent .zcy_number {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;color: #767576;}.zcy_box .zcy_percent .zcy_number h2 {font-size: 24px;}.zcy_box .zcy_percent .zcy_number span {font-size: 24px;}.zcy_box .text {font-size: 24px;padding: 10px 0 0;color: #999;font-weight: 400;letter-spacing: 1px;}</style><script src="./jquery.min.js"></script>
</head><body><div class="app"></div></body>
<script>var obj = {curLegendList: [{ progress: "87", name: "进度1",color:"#00fe41" },{ progress: "66", name: "进度2" ,color:"orange"},{ progress: "50", name: "进度3",color:"#00fe41" },{ progress: "25", name: "进度4" ,color:"red"},{ progress: "87", name: "进度1",color:"#00fe41" },{ progress: "66", name: "进度2" ,color:"orange"},{ progress: "50", name: "进度3",color:"#00fe41" },{ progress: "25", name: "进度4" ,color:"red"},]}function htmlFunc(name, progress, color) {var html = '';html += '<div class="zcy_box">';html += '<h2 class="text">'+name+'</h2>';html += '<div class="zcy_percent">';html += '<div class="zcy_number">';html += '<h2>'+progress+'<span>%</span></h2>';html += '</div>';html += '<svg>';html += '<circle style="stroke-dashoffset: 0;stroke: #ccc;" cx="70" cy="70" r="40"></circle>';html += '<circle style="stroke-dashoffset: calc(440 - (440 * '+progress+')/180);stroke: '+color+';" cx="70" cy="70" r="40"></circle>';html += '</svg>';html += '</div>';html += '</div>';return html;}let curLegendList = res.curLegendList;var curHtml='';for(let i=0;i<curLegendList.length;i++){curHtml += htmlFunc(curLegendList[i].name,curLegendList[i].progress,curLegendList[i].color);}$(".app").html(curHtml);</script></html>2. svg实现方形进度条
效果图
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jq.js"></script></head><body><div id="app"></div></body><script>const circleGirth = 2 * Math.PI * 100 // 圆角的圆的周长const width = 100 - 2 * 10 // 正方形的边长const girth = circleGirth + 4 * width // 圆角矩形总周长const dasharray = `${0.60*0.426*0.5 * girth} ${girth}`const curHtml = `<svg width="120" height="50"><rect fill="none" x="10" y="10" rx="10" width="100" height="30" stroke="#ebedf0" stroke-width="5" /><rect fill="none" x="10" y="10" rx="10" width="100" height="30" stroke="#50D4AB" stroke-width="5" stroke-dasharray="${dasharray}"/></svg>`;$("#app").html(curHtml);</script></html>五分钟学会各种环形进度条
方形进度条从上面链接改造而来，大家可以去看看
