当前位置：首页 > news >正文

用js+css实现圆环型的进度条——js+css基础积累

news 2025/5/19 0:43:14

如果用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>