Progress
Display the current progress of an operation flow.
Import
import { Progress } from 'rsuite';<Progress.Line>Line progress bar.<Progress.Circle>Circle progress bar.
Examples
Line
0%
30%
30%
Vertical
0%
30%
30%
Circle
0%
30%
Dynamic
30%
30%
30%
Props
<Progress.Line>
| Property | Type (Default) |
Description |
|---|---|---|
| classPrefix | string ('progress') |
The prefix of the component CSS class |
| percent | number (0) |
Percent of progress |
| showInfo | boolean (true) |
Show text |
| status | 'success' | 'fail' | 'active' | Progress status |
| strokeColor | string | Line color |
| strokeWidth | number | Line width |
| vertical | boolean | The progress bar is displayed vertically |
<Progress.Circle>
| Property | Type (Default) |
Description |
|---|---|---|
| classPrefix | string ('progress') |
The prefix of the component CSS class |
| gapDegree | number | the gap degree of half circle, 0 ~ 360 |
| gapPosition | 'right' | 'top' | 'bottom' | 'left' ('top') |
Circular progress bar Notch position |
| percent | number (0) |
Percent of progress |
| showInfo | boolean (true) |
Show text |
| status | 'success' | 'fail' | 'active' | Progress status |
| strokeColor | string | Line Color |
| strokeLinecap | 'round' | 'square' | 'butt' ('round') |
The end of different types of open paths |
| strokeWidth | number (6) |
Line width |
| trailColor | string | Trail color |
| trailWidth | number (6) |
Trail width |