COMPONENT 43 · Feedback & Status
进度条
Progress Bar
也叫Progress IndicatorLoading Bar进度指示器NSProgressIndicator
显示耗时操作已经完成的比例，或表达不确定的进行状态。
Shows how much of a time-consuming operation is complete, or that it is still in progress.
ANATOMY & USAGE
结构与使用建议
组成部分
- 轨道
- 填充条
- 数值或状态标签
适合使用
- 操作需要明显等待且能估算或表达进度时。
不建议使用
- 操作几乎即时完成或它其实用于选择数值时。
键盘与无障碍
- 使用 progress 或 progressbar，提供名称与 aria-valuenow；不要只依赖动画表达状态。
DESCRIBE IT TO AI
这样告诉编程助手
实现进度条（Progress Bar）：显示耗时操作已经完成的比例，或表达不确定的进行状态。
MINIMAL RUNNABLE CODE
可复制代码
原生与 React 两套实现，不依赖第三方组件库。
READ ONLY · SAFE TO COPY
<div class="demo stack">
<label for="progress">上传进度</label>
<progress id="progress" max="100" value="64">64%</progress>
</div>