If true, the cap of the progress indicator will be rounded.
Circular Progress
Circular Progress is used to indicates the progress for determinate and indeterminate processes.
Props#
capIsRound
capIsRoundDescription
Type
booleanDefault
falsecolor
colorDescription
The color of the progress indicator. Use a color key in the theme object
Type
stringgetValueText
getValueTextDescription
A function that returns the desired valueText to use in place of the value
Type
(value: number, percent: number) => stringisIndeterminate
isIndeterminateDescription
If true, the progress will be indeterminate and the value
prop will be ignored
Type
booleanDefault
falsemax
maxDescription
Maximum value defining 100% progress made (must be higher than 'min')
Type
numberDefault
100min
minDescription
Minimum value defining 'no progress' (must be lower than 'max')
Type
numberDefault
0size
sizeDescription
The size of the circular progress in CSS units
Type
string | numberthickness
thicknessDescription
This defines the stroke width of the svg circle.
Type
string | numberDefault
10pxtrackColor
trackColorDescription
The color name of the progress track. Use a color key in the theme object
Type
stringvalue
valueDescription
Current progress (must be between min/max)
Type
numbervalueText
valueTextDescription
The desired valueText to use in place of the value
Type
stringProps#
capIsRound
capIsRoundDescription
If true, the cap of the progress indicator will be rounded.
Type
booleanDefault
falsecolor
colorDescription
The color of the progress indicator. Use a color key in the theme object
Type
stringgetValueText
getValueTextDescription
A function that returns the desired valueText to use in place of the value
Type
(value: number, percent: number) => stringisIndeterminate
isIndeterminateDescription
If true, the progress will be indeterminate and the value
prop will be ignored
Type
booleanDefault
falsemax
maxDescription
Maximum value defining 100% progress made (must be higher than 'min')
Type
numberDefault
100min
minDescription
Minimum value defining 'no progress' (must be lower than 'max')
Type
numberDefault
0size
sizeDescription
The size of the circular progress in CSS units
Type
string | numberthickness
thicknessDescription
This defines the stroke width of the svg circle.
Type
string | numberDefault
10pxtrackColor
trackColorDescription
The color name of the progress track. Use a color key in the theme object
Type
stringvalue
valueDescription
Current progress (must be between min/max)
Type
numbervalueText
valueTextDescription
The desired valueText to use in place of the value
Type
string