1、演示
2、一切尽在代码中
<!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><circle cx="70" cy="70" r="70" /><circle id="circle" cx="70" cy="70" r="70" /></svg><div class="num"><h2><span id="per">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: 150px;height: 150px;}.percent svg {width: 150px;height: 150px;}.percent svg circle {fill: none;stroke-width: 10;stroke: #1258e3;transform: translate(5px, 5px);/* 设置虚线长度 = 圆的周长（2*70*3.1415926） */stroke-dasharray: 440;/* 设置圆的空白间隙 */stroke-dashoffset: 440;}.percent svg circle:nth-child(1) {stroke-dashoffset: 0;stroke: #f3f3f3;}.percent svg circle:nth-child(2) {stroke-dashoffset: calc(440 - 440 * (0 / 100));stroke: #1258e3;}.percent .num {position: absolute;left: 0;top: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}#per {font-size: 48px;}</style><script>const circle = document.querySelector('#circle')const per = document.querySelector('#per')let num = 0const timer = setInterval(() => {num += 1if (num > 100) {num = 100clearInterval(timer)blo = false}// 设置进度circle.style.strokeDashoffset = `calc(440 - 440*(${num}/100))`per.innerHTML = num}, 100)</script> </html>
