Progress bar 进度条

/PROG-res BAR/ · noun · 反馈类模式 · #063

逐渐填满的轨道,显示任务完成了多少。诚实的进度条与真实进展挂钩;其余的只是会动的道歉。

Progress bar(进度条) UI 模式示例:CatchUI 图鉴标本

你可能会这样叫它

  • “加载条”
  • “上传进度条”
  • “显示百分比的条”
  • “慢慢填满的横条”
  • “下载进度条”

……它的名字是 进度条(Progress bar)。

代码里叫什么

SwiftUIProgressView
UIKitUIProgressView
Jetpack ComposeLinearProgressIndicator
Android (Views)LinearProgressIndicator
FlutterLinearProgressIndicator
Web (HTML / ARIA)<progress> role="progressbar"

复制给 AI 编程工具

为这次上传加一个进度条:一条细长的横条,随着完成从左往右填满,旁边显示百分比或“第 3 / 5 个文件”。知道进度时用确定进度的样式,只有不知道进度时才用不确定(循环动画)的样式。让读屏软件能读到当前值(网页上用 <progress>),完成后换成明确的成功或失败提示。

用 AI 写界面时该怎么说:UI 用词指南(英文)→

相关模式

传一张截图,抓住这个模式 →

学会从视觉线索认出 UI 模式(英文)