进度条 Progress
给予用户当前系统执行中任务运行状态的反馈，多用于运行一段时间的场景，有效减轻用户在等待中产生的焦虑感。
安装
npm install @arco-design/web-react@2.66.18
在入口引入 @arco-design/web-react/dist/css/arco.css，用 ConfigProvider 设置语言。React 19 项目还需在入口最先引入 @arco-design/web-react/es/_util/react-19-adapter，否则 Message、Modal 等命令式 API 无法渲染。
示例
- 基本用法：简单的进度条。
- 进度条状态：可以通过设置
status使进度条显示内置的状态样式。color属性用于设置进度条的颜色，优先级高于status。showText属性设置为false时，将不会展示文本。 - 环形进度条：
type = circle时候，将会展示环形进度条。 - 微型进度条：
size = mini时，将会展示微型进度条。 - 不同尺寸：设置
size为small、default、large，可设置小、中、大三种尺寸。 - 动画效果：设置
animation为true时，将会显示动画效果，仅当type = line时生效 - 渐变色进度条：
color传入对象时， 会作为 linear-gradient 的属性值设置渐变色。 - 步骤进度条：可以通过设置
steps展示步骤进度条 - 剩余进度条：可以通过
trailColor设置剩余进度条的颜色
示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。
API
Progress
| 参数名 | 描述 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| animation | 动画效果，仅在 type=line 时可用 | boolean | - | - |
| buffer | 加载中的进度条是否显示缓冲区。仅对 type=line 且加载中的进度条有效。 | boolean | - | - |
| showText | 是否展示文本 | boolean | true | - |
| percent | 百分比 | number (必填) | 0 | - |
| steps | 显示步骤进度条 | number | - | 2.10.0 |
| strokeWidth | 进度条线的宽度 | number | - | - |
| trailColor | 剩余进度条颜色。 | string | - | - |
| size | 不同尺寸的进度条 | 'small' | 'default' | 'mini' | 'large' | default | - |
| status | 进度条状态 | 'success' | 'error' | 'normal' | 'warning' | - | 2.16.0 |
| type | 进度条类型 | 'line' | 'circle' | line | - |
| bufferColor | 缓冲区的颜色 | string | object | - | - |
| className | 节点类名 | string | string[] | - | - |
| color | 进度条颜色，优先级高于 status。传入对象时，会显示渐变色进度条。 | string | { [key: string]: string } | - | 2.10.0 |
| style | 节点样式 | CSSProperties | - | - |
| width | 进度条的宽度。circle 类型的进度条仅支持数字类型的width | string | number | - | - |
| formatText | 进度条文本函数 | (percent: number) => ReactNode | - | - |