Progress
A Progress loader show the progression of an operation flow in visual way.
Progress Bar
Progress in progress bar was controlled by
percent prop.Circle
Alternatively, we can display the Progress in circle by setting
variant to 'circle'40%
70%
Colors
We can apply custom color to the progress bar, available colors option based on tailwind
theme.colors.Size
Adjusting progress size via
size prop for line progress or width prop for circle progress.40%
CustomInfo
We can insert any custom content via
customInfo/code>.40%
completionDynamic
Example of dynamic progress.
20%
API
Progress
| Prop | Description | Type | Default |
|---|---|---|---|
| customColorClass | Custom color class for progress bar | string | - |
| customInfo | Custom content | string | ReactNode | - |
| gapDegree | The gap degree of circle progress (only applicable when variant="circle") | number | 0 |
| gapPosition | Gap postion of circle progress (only applicable when variant="circle") | 'top' | 'right' | 'bottom' | 'left' | 'top' |
| percent | The current value of progress | number | 0 |
| showInfo | Whether to display progress info | boolean | true |
| size | Size of progress bar (only applicable when variant="line") | 'sm' | 'md' | 'md' |
| strokeLinecap | Style of the progress linecap (only applicable when variant="circle") | 'round' | 'square' | 'round' |
| strokeWidth | Width of the circular progress (only applicable when variant="circle") | number | 6 |
| trailClass | Css class for progress trail | string | - |
| variant | Progress variants | 'line' | 'circle' | 'line' |
| width | Determine the size of circular progress (only applicable when variant="circle") | number | string | 'line' |