# 进度条 Progress

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/progress
- 资源: Arco Design (https://jiguang132.com/zh/resources/arco-design.md)
- 全部指南: https://jiguang132.com/zh/resources/arco-design/docs.md

给予用户当前系统执行中任务运行状态的反馈，多用于运行一段时间的场景，有效减轻用户在等待中产生的焦虑感。

## 安装

```bash
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 |`-`|-|

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt