# Progress

- Page: https://jiguang132.com/resources/arco-design/docs/progress
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

Give users feedback on the current running tasks, which is mostly used in scenes that run for a period of time, effectively reducing the anxiety of users in waiting.

## Install

```bash
npm install @arco-design/web-react@2.66.18
```

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: A simple progress bar.
- **status**: You can set the status of the progress. If `showText` is `false`, the percentage text will not be displayed.
- **Circular progress bar**: A circular progress bar.
- **Mini progress bar**: A mini progress bar.
- **Size**: There are four sizes available: `min`, `small`, `default`, `large`.
- **Animation**: Display animation effects. Only work when `type` is `'line'`.
- **linear gradient**: linear-gradient progress bar.
- **steps**: Steps progress will be displayed if you set steps property.
- **trail color**: You can use 'trailColor' to set the color of the remaining progress bar.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### Progress

|Property|Description|Type|DefaultValue|Version|
|---|---|---|---|---|
|animation|Whether show animation, Only available when `type="line"`|boolean |`-`|-|
|buffer|Whether the Progress show buffer. Only available when `type=line`|boolean |`-`|-|
|showText|Whether display text|boolean |`true`|-|
|percent|percent|number  **(Required)**|`0`|-|
|steps|Show step progress|number |`-`|2.10.0|
|strokeWidth|The stroke width of Progress|number |`-`|-|
|trailColor|The rest of progress bar color.|string |`-`|-|
|size|The size of Progress|'small' \| 'default' \| 'mini' \| 'large' |`default`|-|
|status|Progress status.|'success' \| 'error' \| 'normal' \| 'warning' |`-`|2.16.0|
|type|The type of Progress|'line' \| 'circle' |`line`|-|
|bufferColor|Buffer color|string \| object |`-`|-|
|className|Additional css class|string \| string[] |`-`|-|
|color|Progress color, priority is higher than `status`|string \| { [key: string]: string } |`-`|2.10.0|
|style|Additional style|CSSProperties |`-`|-|
|width|The Progress width. The `circle` type Progress only supports the number type `width`|string \| number |`-`|-|
|formatText|Progress text function|(percent: number) => ReactNode |`-`|-|

---

Index of all JGuang resources: https://jiguang132.com/llms.txt