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>五分鐘學會各種環形進度條
方形進度條從上面鏈接改造而來，大家可以去看看
快速入門LoRA、AdaLoRA)
