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
#
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 |