Progress 进度条
展示可量化任务的完成比例，或表达无法估算的进行中状态。
使用概览
适合使用
- 上传、导入或多步骤处理具有持续时间并需反馈进度时。
不建议使用
- 操作几乎即时完成，或无法确认任务是否真的已经开始时。
真实示例
文件上传进度
以确定值展示文件已经完成百分之六十八。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/progress.json基础用法
导入
import { Progress } from "@richardqiu/quartz/progress";JSX
<Progress value={68} aria-label="文件上传进度" />状态与控制摘要
默认
加载中
不确定
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | number | null | null | 传入完成百分比；为空时呈现不确定进度。 |
组合结构
- 01
Progress
键盘约定
- Progress 是只读反馈，不进入键盘焦点顺序。
可访问性契约
- 通过 aria-label 或 aria-labelledby 提供可访问名称。
- 确定值暴露 aria-valuenow；不确定状态不会虚构数值。