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>五分钟学会各种环形进度条
方形进度条从上面链接改造而来，大家可以去看看
