← 返回 Web 词条
进度条
在 Web 上叫progress
HTML: <progress>
官方定义是「显示一个任务完成进度的指示器,通常渲染成一条进度条」。不定量也是它:官方写明「如果没有 value 属性,进度条就是不定量的,表示某个活动正在进行但无法预估还要多久」,并可用 :indeterminate 选中。所以定量与不定量在这一端是同一个元素的两种状态,不是两个东西。
一条沿轨道延展的横条,用填充表示事情进行到哪一步;不知道还剩多少时,条本身也可以只是动着。
- 那条会走满的横条
- 读条
- 进度走到一半卡住了
- 进度条
- 进度指示器
- 线性进度指示器
其他平台的相似实现
iOS原生支持
Progress Bar异名官方描述条形的填充方向:「进度条有一条从前缘向后缘填充的轨道」。
看 iOS 视角 →Android原生支持
Linear Progress Indicator异名Material 把进度指示器分成「linear and circular」两个变体,线性那个归这里。
看 Android 视角 →使用规范
什么时候用
- 任务有可计算的进度,能告诉用户还剩多少时
- 下载、上传、导出这类用户愿意等但想知道进展的操作
- 版面能放下一条横轨道,比一个环形更容易读出「走到哪了」时
什么时候别用
- 耗时极短,条还没走就没了
- 进度值是编的 —— 不知道进度就用平台支持的不定量形态,别伪造数值
- 该平台不支持不定量的条(iOS 就是)→ 那种情况用加载指示器
容易混淆
Web 出处
查看 Web / iOS / Android 完整对照 →概念页上还有可交互示例。