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
capIsRound
Description
Type
boolean
Default
false
color
color
Description
The color of the progress indicator. Use a color key in the theme object
Type
string
getValueText
getValueText
Description
A function that returns the desired valueText to use in place of the value
Type
(value: number, percent: number) => string
isIndeterminate
isIndeterminate
Description
If true
, the progress will be indeterminate and the value
prop will be ignored
Type
boolean
Default
false
max
max
Description
Maximum value defining 100% progress made (must be higher than 'min')
Type
number
Default
100
min
min
Description
Minimum value defining 'no progress' (must be lower than 'max')
Type
number
Default
0
size
size
Description
The size of the circular progress in CSS units
Type
string | number
thickness
thickness
Description
This defines the stroke width of the svg circle.
Type
string | number
Default
10px
trackColor
trackColor
Description
The color name of the progress track. Use a color key in the theme object
Type
string
value
value
Description
Current progress (must be between min/max)
Type
number
valueText
valueText
Description
The desired valueText to use in place of the value
Type
string