用 stroke-dashoffset 配合 css 动画实现圆形进度条动态增长，核心是通过控制 svg 圆环描边的起始偏移量：先设 stroke-dasharray 为周长 c, c，再令 stroke-dashoffset 从 c × (1 − 进度%) 线性减至 0，使实线段逐步显现，达成 0%→100% 视觉增长效果。
用 stroke-dashoffset 配合 CSS 动画实现圆形进度条的动态增长，核心是控制 SVG 圆环的“未绘制部分”长度，让它随时间减小，视觉上就像进度在增加。
理解关键原理：circumference 和 dashoffset
SVG 中一个圆形进度条通常用 <circle></circle> 绘制。要让它动起来，需提前算出圆周长（circumference），再通过 stroke-dasharray 把描边变成“一整段实线 + 无限空白”，最后用 stroke-dashoffset 控制起点偏移量：
- 设圆半径为
r，则周长c = 2 * π * r -
stroke-dasharray: c, c表示“画 c 长度，空 c 长度”，此时整个圆不可见（全被空白覆盖） -
stroke-dashoffset初始设为c，相当于把“实线段起点”向后推了整整一圈 → 还是看不见 - 当
stroke-dashoffset从c减小到0，实线段就从“完全隐藏”逐步“露出”，形成从 0% 到 100% 的增长效果
写一个可复用的动画关键帧
定义一个从满偏移到零的动画，适配任意进度值（比如 65%，就让 offset 从 c 变到 c × (1 − 0.65)）：
@keyframes circle-progress { to { stroke-dashoffset: 0; } }注意：动画本身只做“从 c 到 0”的全程；实际显示多少，由初始 stroke-dashoffset 值决定 —— 比如要停在 70%，就设初始 offset 为 c × 0.3，再加动画，它就会从 0.3c 跑到 0，对应 30% 空白 → 70% 显示。
立即学习“前端免费学习笔记（深入）”；
html + CSS 完整示例（支持 0~100% 动态）
假设圆半径 50，中心 (60,60)，用 CSS 自定义属性控制进度更灵活：
<svg viewBox="0 0 120 120"> <circle cx="60" cy="60" r="50" stroke="#e0e0e0" stroke-width="8" fill="none"/> <circle cx="60" cy="60" r="50" stroke="#4caf50" stroke-width="8" fill="none" style="--p: 75; stroke-dasharray: 314.16, 314.16; stroke-dashoffset: calc(314.16 * (1 - var(--p) / 100)); animation: circle-progress 2s ease-out forwards;" /> </svg>说明：
- 周长 ≈ 2 × π × 50 ≈ 314.16，直接写死或用 js 计算后注入更严谨
-
--p: 75表示目标进度 75%，初始 offset = 314.16 × (1 − 0.75) = 78.54 - 动画执行时 offset 从 78.54 → 0，即“露出 235.62 长度”，占周长 75%
- 加
forwards保证动画结束后保持最终状态，不回弹
进阶提示：配合 JS 实时更新进度
如果进度来自数据（比如接口返回 42%），推荐用 JS 设置自定义属性，避免重复写 keyframes：
const circle = document.querySelector('circle:last-of-type'); circle.style.setProperty('--p', 42); // 自动触发新动画若需多次更新且每次都要重播动画，可在 JS 中临时清除并重设 class 或 animation：
- 先
circle.style.animation = 'none' - 再
circle.offsetHeight（强制重排，清掉上一次动画状态） - 最后恢复
animation并更新--p
基本上就这些。不复杂但容易忽略的是：一定要设 stroke-dasharray 为 c, c，且动画终点必须是 0，起始 offset 必须按比例算准 —— 错一点，进度就不准或不动。