动画 · 加载与进度 · 06

进度条

进度条 = 进度条从 0 填充到 100%，把不确定的等待变成可衡量、可控的过程。

Loading…

尊重 prefers-reduced-motion：动画关闭，仅保留终态。

怎么向 AI 描述它

Build a progress bar that fills 0 to 100% on a 2.2s eased loop; use width for a short bar.

For a full-width bar, switch the fill to transform: scaleX(0 to 1) with transform-origin left so it stays GPU-composited.

Drive the bar from a real progress value when available; when unknown, loop a 30 to 90% partial fill so it never appears frozen at 100%. Expose --bar-color and --bar-speed, and under prefers-reduced-motion render a static 60% fill.

修改类 Prompt 只动目标，不碰页面其余部分。

进度条是什么？

进度条把「正在发生」变成「已完成这么多」。已知时长就填到真实百分比；未知时长就循环部分填充，别让它卡在 100% 像坏了。用柔和缓动，长条优先用 transform: scaleX 而非 width 以留在合成层。

动画标本

触发: load
技术: css
时长: 2.2s
缓动: cubic-bezier(0.16, 1, 0.3, 1)
性能: width

什么时候用

File uploads, installs, multi-step wizards
Onboarding or setup flows with a known step count

什么时候别用

Instant actions — a bar that flashes confuses
Looping at 100% — it looks broken, not busy

For unknown duration, loop a partial fill (30 to 90%) rather than hitting 100% and stalling.

获取代码

.anim-el {
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
:root { --anim-accent: #6d5efc; }

.prog { width: min(240px, 100%); }
.prog-track {
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--anim-accent) 16%, #e7e8ee);
  overflow: hidden;
}
.prog-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--anim-accent);
  animation-name: fill;
  animation-duration: var(--anim-duration, 2.2s);
  animation-timing-function: var(--anim-easing, cubic-bezier(0.16, 1, 0.3, 1));
}
.prog-label { margin-top: 10px; font: 500 12px/1 'IBM Plex Mono', monospace; color: var(--mute, #6b6f7a); text-align: right; }
@keyframes fill {
  0% { width: 0%; }
  70%, 100% { width: 100%; }
}

<div class="prog">
  <div class="prog-track"><div class="prog-fill anim-el"></div></div>
  <div class="prog-label">Loading…</div>
</div>

复制后即可用于你的项目。动效仅作用于 transform / opacity；颜色取自 --anim-accent。

另见

风格

极简→

主题

AI SaaS 落地页→

组件

按钮→

进度条

进度条是什么？

动画标本

什么时候用

什么时候别用

另见

组件

动画

风格

主题

Prompt

术语

反模式

进度条

进度条是什么？

动画 标本

什么时候用

什么时候别用

另见

动画标本