JS实现可动的svg环形进度条

老样子，先看效果图

 SVG标签

<svg width="60" height="60">
	<g transform="rotate(-90 30 30)">
		<circle id="progress-bg" cx="30" cy="30" r="25" fill="none" stroke="#dddddd" stroke-width="4"></circle>
		<circle id="progress-circle" cx="30" cy="30" r="25" fill="none" stroke="#0f4cb6" stroke-width="4"></circle>
	</g>
	<text id="progress-text" x="30" y="35" text-anchor="middle" font-size="12" fill="#0f4cb6">0%</text>
</svg>

JS代码

const circle = document.getElementById(`progress-circle`);
const text = document.getElementById(`progress-text`);
// 进度
var currPrg = 80;
function setProgress(percent) {
    // 设置文字
    text.innerHTML = `${percent}%`;
    const radius = circle.r.baseVal.value;
    const circumference = 2 * Math.PI * radius;
    const offset = circumference - percent / 100 * circumference;
    circle.style.strokeDasharray = `${circumference} ${circumference}`;
    circle.style.strokeDashoffset = offset;
}
// 示例：每隔0.05秒增加1%，直到达到设置进度
let progress = 0;
const interval = setInterval(() => {
    progress += 1;
    if (progress >= currPrg) {
        clearInterval(interval);
    }
    setProgress(progress);
}, 50);

svg教程：SVG 教程 - SVG：可缩放矢量图形 | MDN (mozilla.org)