UI · №26 · PLATE

加载进度（怎么选）Spinner vs Progress Bar vs Progress Ring

转圈圈加载中那个圈显示百分比的条圆环形的进度

先看怎么选

「加个加载中」其实是三种承诺——不知道多久的转圈、说得清百分比的横条、省地方还带数字的圆环。说错了，agent 会给你一根永远停在 60% 的假进度条，而你要的只是一个诚实的转圈。

朱批时长未知 → Spinner；可量化、有横向空间 → Progress Bar；空间紧凑、要带中心数字 → Progress Ring。

LIVE SPECIMEN真的能玩，点点看

Spinner

72%

Bar

72Ring

转圈

Spinner

时长未知时的「在忙」信号——只表示程序活着，不承诺进度，转多久都不奇怪。

适合: 请求时长未知、预计很短（3 秒内）的等待——按钮提交、下拉刷新、小块内容加载。
不适合: 能算出百分比的任务——上传/下载还让用户干瞪一个圈，是在浪费信息。

实现细节与 Prompt

web: CSS border + animation rotate；语义 role="status"
react: MUI <CircularProgress />（indeterminate 模式）

Add a loading spinner: a 20px circle with a 2px light-gray border whose top segment is the accent color, rotating 360° every 0.8s linear infinite; give it role="status" with aria-label="loading" and hide it when the request resolves.

进度条

Progress Bar

横向条形的可量化进度——0 到 100%，承诺「还有多久」，最经得起长任务。

适合: 上传、下载、导入导出、多步向导——超过几秒、且真的算得出百分比的任务。
不适合: 根本拿不到真实进度时——宁可转圈，也别让 agent 造一根匀速爬到 90% 就装死的假条。

实现细节与 Prompt

web: <progress value max> 或 role="progressbar" + aria-valuenow
react: 受控 value：<Progress value={pct} />

Show upload progress as a horizontal bar: a 6px rounded track with an accent-color fill whose width is bound to the real percent (0-100), width changes eased over 200ms, percent number right-aligned above the bar; use <progress> or role="progressbar" with aria-valuenow.

进度环

Progress Ring

环形的可量化进度——同样 0 到 100%，胜在省空间、天生适合中心放数字。

适合: 紧凑位置的确定性进度——头像上传角标、卡片角落、仪表盘部件。
不适合: 时长未知时——圆环会被误读成「快转完了」；主流程长任务用横条，扫视更自然。

实现细节与 Prompt

web: SVG circle + stroke-dasharray/dashoffset，起点转到 12 点
react: MUI <CircularProgress variant="determinate" value={pct} />

Render progress as a ring: an SVG circle whose stroke-dasharray equals its circumference, animate stroke-dashoffset to match the real percent, rotate the circle -90deg so progress starts at 12 o'clock, and center the percent number inside the ring.

详细说明

三个词都会被叫成「加载中」，但 agent 眼里它们是三种承诺：Spinner 只承诺「程序活着」，Progress Bar 承诺「还有多久」，Progress Ring 用更小的地方做同样的承诺。最常见的翻车是假进度——拿不到真实百分比就老实用 Spinner，别让 agent 编一根永远差 10% 的条。