CSS圆形进度条动态实现技巧

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《CSS圆形进度条动态增长实现方法》，聊聊，我们一起来看看吧！

用 stroke-dashoffset 配合 CSS 动画实现圆形进度条动态增长，核心是通过控制 SVG 圆环描边的起始偏移量：先设 stroke-dasharray 为周长 c, c，再令 stroke-dashoffset 从 c × (1 − 进度%) 线性减至 0，使实线段逐步显现，达成 0%→100% 视觉增长效果。

用 stroke-dashoffset 配合 CSS 动画实现圆形进度条的动态增长，核心是控制 SVG 圆环的“未绘制部分”长度，让它随时间减小，视觉上就像进度在增加。

理解关键原理：circumference 和 dashoffset

SVG 中一个圆形进度条通常用 绘制。要让它动起来，需提前算出圆周长（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 必须按比例算准 —— 错一点，进度就不准或不动。

终于介绍完啦！小伙伴们，这篇关于《CSS圆形进度条动态实现技巧》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！