动态环形进度条用SVG circle+stroke-dasharray/dashoffset实现，需精确计算周长2πr并设rotate(-90)校正起点，配合CSS transition和JS动态更新stroke-dashoffset值。
用 HTML + SVG 制作动态加载的环形进度条动画，核心是用 <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 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;"/>
</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))
