Progress Ring vs. Spinner vs. Progress Bar 进度环 vs. Spinner vs. 进度条 web
A spinner means wait; a ring or bar can show how much work is complete
Spinner 只表示「请等待」；进度环或进度条能显示已经完成了多少
标本可交互 —— 点点看。Specimen is live — try it.
Anatomy — every part, named解剖 —— 每个部件的名字
-
1 Indeterminate spinner不确定型 Spinner
role="progressbar"The spinning circle that keeps looping is an indeterminate spinner: it says work is happening, not how much is left.
那个一直循环转动的圈就是不确定型 Spinner：它只表示「正在工作」，不表示还剩多少。
Prompt fragmentPrompt 片段an indeterminate spinner with role="progressbar" and no aria-valuenow: a looping circular stroke used only when the remaining duration or completion amount is unknown
一个带 role="progressbar"、不带 aria-valuenow 的 indeterminate spinner：循环转动的圆形描边，只在剩余时长或完成量未知时使用
-
2 Determinate progress ring确定型进度环
aria-valuenow“The ring that fills up” is a determinate progress ring: its circular arc represents a known completion value.
「会填满的那个环」就是确定型进度环：它的圆弧表示一个已知的完成值。
Prompt fragmentPrompt 片段a determinate progress ring with role="progressbar" and aria-valuenow: a circular arc that visibly fills from empty to complete around a stable track
一个带 role="progressbar" 和 aria-valuenow 的确定型进度环：圆弧沿固定轨道从空到满逐渐填充
-
3 Linear progress bar线性进度条
<progress>The bar that fills from one side to the other is a linear progress bar; use <progress> when its value is known.
从一端填充到另一端的那条就是线性进度条；数值已知时用 <progress>。
Prompt fragmentPrompt 片段a determinate linear progress bar using HTML <progress>: the filled value advances across a fixed horizontal track from minimum to completion
一个用 HTML <progress> 实现的确定型线性进度条：填充值沿固定的水平轨道从最小值推进到完成
-
4 Progress track进度轨道
<progress>The unfilled rail behind a progress ring or bar is the track; it shows the indicator's full range.
进度环或进度条背后那条未填充的底轨就是轨道（track），它展示指示器的完整量程。
Prompt fragmentPrompt 片段the progress track behind the <progress> value: the full, low-contrast rail that remains visible around the unfilled portion of the indicator
<progress> 填充值背后的进度轨道：一条完整、低对比度的底轨，在指示器未填充的部分保持可见
-
5 Percentage label百分比标签
aria-valuenowThe number beside or inside the indicator is the percentage label, a readable statement of the current progress value.
指示器旁边或内部的数字就是百分比标签，用可读的方式写出当前进度值。
Prompt fragmentPrompt 片段a percentage label for the progress indicator, such as 72%, kept in sync with role="progressbar" and its aria-valuenow value
给进度指示器加一个百分比标签，如 72%，并与 role="progressbar" 及其 aria-valuenow 值保持同步
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Use the correct Progress Indicator: an indeterminate spinner when the remaining work is unknown, a determinate progress ring when a compact circular arc should fill toward completion, or an HTML <progress> linear bar when there is room for a readable track. For a custom indicator use role="progressbar" with aria-valuenow, and expose any visible percentage as the same accessible value; SwiftUI's cousin is ProgressView.
使用正确的进度指示器：剩余工作量未知时用 indeterminate spinner；需要用紧凑的圆弧逐渐填充至完成时用确定型进度环；空间足够放下一条可读轨道时用 HTML <progress> 线性进度条。自定义指示器要用 role="progressbar" 配合 aria-valuenow，并让任何可见百分比与同一个无障碍值保持一致；SwiftUI 里对应的是 ProgressView。
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug my progress indicator (role=progressbar, aria-valuenow, spinner). Rule out: an indeterminate spinner where a determinate bar was possible (or vice versa); the bar width not animating because the transition is on the wrong property; the loading flag stuck true so the spinner never stops; aria-valuenow never updating so assistive tech hears 0 percent forever. The symptom:
调试我的进度指示器（role=progressbar、aria-valuenow、spinner）。排除以下可能：本可以用确定型进度条却用了 indeterminate spinner（或反过来）；进度条宽度不动画，因为 transition 加在了错误的属性上；loading 标志卡在 true，spinner 永远停不下来；aria-valuenow 从不更新，辅助技术永远读到 0%。症状是：
In code代码里叫什么
| Framework框架 | Symbol符号 | Note说明 |
|---|---|---|
| HTML | <progress> | |
| SwiftUI | ProgressView | |
| ARIA | role="progressbar" | |
| ARIA | aria-valuenow |