Progress
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
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
showTextisfalse, 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
typeis'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 | - | - |