实现效果
实现源码
<!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>
<style>
.container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.progress {
stroke-dasharray: 502;
stroke-dashoffset: 502;
transition: all .2s;
}
</style>
</head>
<body>
<svg width="200" height="200" class="container">
<circle cx="100" cy="100" r="80"
fill="transparent" stroke="#ff2972" stroke-width="8"
class="progress">
</circle>
<text x="100" y="100" fill="#ff2972"
text-anchor="middle" alignment-baseline="middle"
class="text"
>0%
</text>
</svg>
<script>
const progress = document.querySelector('.progress')
const text = document.querySelector('.text')
const loadingArr = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
let index = 0
const total = progress.getTotalLength()
const timer = setInterval(() => {
progress.style.strokeDashoffset = total - (loadingArr[index] * total) / 100
index++
text.textContent = `${loadingArr[index]}%`
if(index === loadingArr.length ) {
clearInterval(timer)
text.textContent = `Done!`
}
}, 100)
</script>
</body>
</html>