动态环形进度条用svg circle+stroke-dasharray/dashoffset实现，需精确计算周长2πr并设rotate(-90)校正起点，配合css transition和js动态更新stroke-dashoffset值。
用 HTML + SVG 制作动态加载的环形进度条动画，核心是用 <circle></circle> 描边路径模拟“画圆”过程，靠 stroke-dasharray 和 stroke-dashoffset 配合周长计算实现精确控制，再加 CSS 过渡或 JS 更新完成动画。这不是旋转遮罩，而是真实路径裁剪，所以缩放不失真、各浏览器表现一致。
必须算周长，不能写死数值
圆周长 = 2 * Math.PI * r。比如 r="45"，周长 ≈ 282.74。这个值要填进 stroke-dasharray，也用于后续 stroke-dashoffset 计算。写死（如 314）会导致换尺寸、缩放或改半径时进度错位。
起点要校正到顶部（12点方向）
SVG 默认从 3 点钟方向（正右）开始绘制。不处理会看到进度“先甩一圈再动”。加 transform="rotate(-90 50 50)"（中心点需匹配 cx/cy）就能对齐顶部，视觉更自然。
结构：两个 分层绘制
- 背景圆：灰色描边，不参与动画，仅作底衬
- 进度圆：彩色描边，通过 `stroke-dashoffset` 控制显示长度
示例（viewBox="0 0 100 100"，圆心 (50,50)，半径 45）：
<svg viewbox="0 0 100 100"><!-- 背景环 --><circle cx="50" cy="50" r="45" fill="none" stroke="#e0e0e0" stroke-width="8"></circle><!-- 进度环 --><circle cx="50" cy="50" r="45" fill="none" stroke="#4CAF50" stroke-width="8" stroke-dasharray="282.74" stroke-dashoffset="282.74" transform="rotate(-90 50 50)" style="transition: stroke-dashoffset 0.3s ease-out;"></circle></svg>
JS 动态更新进度（比如加载中 → 85%）
只需修改 `stroke-dashoffset`，值越小，显示越长： - 0% → `offset = 周长`（完全隐藏） - 100% → `offset = 0`（整圈显示） - 任意百分比 → `offset = 周长 × (1 − 百分比/100)`推荐写法（安全、兼容 SSR 和 Shadow DOM）：
- 先获取元素：
const circle = document.querySelector('svg circle:last-child') - 计算偏移量：
const offset = circumference * (1 - percent / 100) - 设置属性：
circle.setAttribute('stroke-dashoffset', offset.toFixed(2))
关键细节别漏
- 加 `stroke-linecap="round"` 消除圆环两端接缝，边缘更圆润 - `transition` 必须写在内联 `style` 上，CSS 类里可能被覆盖 - 不要对 `stroke-dasharray` 做 transition —— 它是离散值，浏览器无法插值 - 如果多个进度条，避免高频 `setAttribute`，可批量计算后统一触发重排文字同步显示（可选但实用）
在 `前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
