进度条：随推进增长、带终态的过程指示
点主按钮推进任务，看填充宽度、百分比和剩余步数怎么长在物件上；切换确定/不确定型，再模拟一次失败重试。
资料导入状态：尚未开始
0%0/5 步 · 还剩 5 步 · 约剩 100 秒
尚未开始。原因：任务未启动。点「开始导入」进入第 1 步——进度条会随每一步增长填充。
确定型报数，不确定型只动画
刚才在面板里看到的状态，归纳成四条规则。
- 确定型 = 已知总量 + 百分比：填充宽度 = 完成/总量，同步报 aria-valuenow、剩余步数和约剩时间，不只给一根光秃秃的条。
- 不确定型 = 未知时长 + 持续动画：去掉 aria-valuenow 与百分比，只用动画告诉用户「在动」，绝不报假数；完成后仍要给终态。
- 结果长在物件上：填充变宽、百分比数字上涨、完成时走满停止、失败时保留当前宽度——不能只靠页脚一句文案。
- 失败保留上下文 + 重试：失败是可见终态（不是回到未知的 0%），说明出错步骤并提供「重试」，让用户从当前进度继续。
什么时候用进度条
看到下面这些信号再上进度条；不是所有等待都需要它。
- 适用：任务约 2 秒以上、且能算出完成度——文件导入、批量处理、安装、上传队列。
- 不确定型适用：任务超过 2 秒但无法估出总量——改成持续动画的进度条，仍要让用户知道在推进。
- 改用 spinner：短时（< 2 秒）或局部按钮内的等待，用小圆环加载器，不必占一条整宽进度条。
- 改用骨架屏：等待的是「即将到来的内容」时，用占位块模拟真实比例，而不是一根抽象的条。
- 改用步骤条：任务是离散的多步导航（第几步/共几步）时，用 steps；进度条表达的是连续的完成度。
怎么把进度做对
从开始到判断的最短操作链。
- 语义：用
role="progressbar"，报aria-valuemin/max；确定型再报aria-valuenow与可读的aria-valuetext，不确定型省略 valuenow。 - 数值同步：填充宽度、百分比文字、剩余步数/时间、按钮可用性都跟随同一个真实完成量，不要各算各的。
- 终态明确：完成（走满 + 停止 + 文字）和失败（保留 + 原因 + 重试）是两个不同终态，状态不能只靠颜色区分。
- 给文字：长时间任务除了条，还要给「还剩 X 步 / 约剩 Y 秒 / 当前步骤」文字，避免一根无解释的条。
正反例：失败时要不要保留进度
同一个导入任务在第 3 步失败，只改一处——是否保留已完成进度。
正例
失败时保留 60%、说出错步骤、给「重试」：用户知道丢了多少、能从当前进度恢复。
反例
失败时清空回 0% 或伪装 100%：用户不知道已完成多少，被迫从头再来或误以为成功。
快速自测
资料导入到第 3 步（60%）时网络断了，进度条最合适的行为是什么？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。