进度条动画合集（6 款加载进度条 CSS 源码）

效果演示（真实可交互）

演示区共 6 款进度条：前 4 款纯 CSS 即可运行；第 5 款用 SVG 圆环实现环形进度；第 6 款数字计数用原生 JS 驱动，点击「重放」可重新观看动画。

完整代码

① 不确定进度条（适合未知耗时的加载，如接口请求）：

<div class="track"><div class="indet"></div></div>

.track { height: 10px; border-radius: 5px; background: #eef1f8; overflow: hidden; position: relative; }
.indet { position: absolute; top: 0; left: 0; width: 38%; height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, #6c8cff, #b388ff);
  animation: run 1.2s ease-in-out infinite; }
@keyframes run { 0% { left: -38%; } 100% { left: 100%; } }

⑥ 数字计数进度条（JS 驱动，easeOutCubic 缓动）：

<div class="track"><div class="fill count" id="bar"></div></div>
<span id="num">0%</span>

.count { background: linear-gradient(90deg, #f472b6, #fb923c); transition: width .12s linear; }

const bar = document.getElementById('bar');
const num = document.getElementById('num');
const target = 85, duration = 1600, t0 = performance.now();
function step(now) {
  const p = Math.min((now - t0) / duration, 1);
  const v = Math.round((1 - Math.pow(1 - p, 3)) * target);
  bar.style.width = v + '%';
  num.textContent = v + '%';
  if (p < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);

②③④⑤ 款（条纹滚动、渐变扫光、圆点跑动、SVG 环形）的完整样式见上方演示区 .pb-* 系列，结构与 ① 相同：外层 .pb-track 轨道 + 内部填充块，复制对应类与 @keyframes 即可。

参数说明

兼容性与性能

• ①②③④ 仅使用 transform 和 left 动画，GPU 友好；⑥ 使用 transition: width，元素小、开销可忽略
• ⑤ 环形进度基于 SVG stroke-dashoffset，Chrome / Firefox / Safari / Edge 均支持
• 进度条动画只在加载期间运行，结束后建议连同容器一起移除
• 注意：⑥ 的 transition: width 会触发布局计算，若页面同时存在大量进度条（超过 30 个），建议改用 transform 缩放方案

常见问题

Q: 能商用吗？ 可以。本组件为粤喵自研，免费商用无需署名。

Q: 怎么把不确定进度条改成确定进度？ 给 .indet 换成固定宽度填充块（.pb-fill），再通过 JS 更新 style.width 即可，动画部分删掉。

Q: 环形进度想改成 30% 怎么调？ 圆环周长约 264（2π×42），30% 的偏移量 = 264 × 0.7 ≈ 185，把 stroke-dashoffset 的结束值改为 185。

Q: 进度条在低端手机上卡顿怎么办？ 优先保证 transform 动画（①②④），避免大面积渐变与 filter；必要时降低动画元素数量与更新频率（⑥ 可改 30fps）。