ServiceStation

Progress

A Progress loader show the progression of an operation flow in visual way.

Progress in progress bar was controlled by percent prop.

30%

Alternatively, we can display the Progress in circle by setting variant to 'circle'

40%

70%

We can apply custom color to the progress bar, available colors option based on tailwind theme.colors.

20%

30%

Adjusting progress size via size prop for line progress or width prop for circle progress.

60%

40%

We can insert any custom content via customInfo/code>.

completion

Example of dynamic progress.

20%

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'`