如果用js+css实现圆环型的进度条:
直接上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>环形进度条</title>
</head>
<body>
<div class="percent">
<svg style="transform: rotate(-90deg)">
<circle cx="50" cy="50" r="50" />
<circle id="circle" cx="50" cy="50" r="50" style="stroke: red" />
</svg>
<div class="num">
<h2>
<span id="per">0</span>
<span>%</span>
</h2>
</div>
</div>
<div class="percent">
<svg style="transform: rotate(-90deg)">
<circle cx="50" cy="50" r="50" />
<circle id="circle2" cx="50" cy="50" r="50" style="stroke: #f90" />
</svg>
<div class="num">
<h2>
<span id="per2">0</span>
<span>%</span>
</h2>
</div>
</div>
<div class="percent">
<svg style="transform: rotate(-90deg)">
<circle cx="50" cy="50" r="50" />
<circle id="circle3" cx="50" cy="50" r="50" style="stroke: #67c23a" />
</svg>
<div class="num">
<h2>
<span id="per3">0</span>
<span>%</span>
</h2>
</div>
</div>
</body>
<style>
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
.percent {
position: relative;
width: 110px;
height: 110px;
}
.percent svg {
width: 110px;
height: 110px;
}
.percent svg circle {
fill: none;
stroke-width: 10;
stroke: #1258e3;
transform: translate(5px, 5px);
/* 设置虚线长度 = 圆的周长(2*50*3.1415926) */
stroke-dasharray: 310;
/* 设置圆的空白间隙 */
stroke-dashoffset: 310;
}
.percent svg circle:nth-child(1) {
stroke-dashoffset: 0;
stroke: #f3f3f3;
}
.percent svg circle:nth-child(2) {
stroke-dashoffset: calc(310 - 310 * (0 / 100));
stroke-linecap: round;
}
.percent .num {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#per {
font-size: 22px;
}
</style>
<script>
circleRender(
document.querySelector('#circle'),
document.querySelector('#per'),
50
);
circleRender(
document.querySelector('#circle2'),
document.querySelector('#per2'),
10
);
circleRender(
document.querySelector('#circle3'),
document.querySelector('#per3'),
95
);
function circleRender(circle, per, percent) {
let num = 0;
const timer = setInterval(() => {
num += 1;
if (num > percent) {
num = percent;
clearInterval(timer);
blo = false;
}
// 设置进度
circle.style.strokeDashoffset = `calc(310 - 310*(${num}/100))`;
per.innerHTML = num;
}, 100);
}
</script>
</html>