The CircularProgress component is used to indicate the progress for determinate and indeterminate processes.
You can add
size prop to the progress bar to add a custom size.
You can add the
thickness prop to update the thickness of the progress ring.
The thickness has to be a ratio of the size. Value should be between 0 and 1.
You can add
color prop to any progress bar to apply any color that exists in
Chakra exports a
CircularProgressLabel to help you add a label. Pass this
children prop and you'll be able to render the value.
Setting the progress to indeterminate means you're not able to determine the
value upfront. Pass the
isIndeterminate prop to activate this state.
progressbarto denote that it is a progress bar.
aria-valuenowset to the percentage completion value passed to the component, to ensure the progress percent is visible to screen readers.
|capIsRound||If `true`, the cap of the progress indicator will be rounded.||-|
|css||The emotion's css style object||-|
|getValueText||A function that returns the desired valueText to use in place of the value||-|
|isIndeterminate||If `true`, the progress will be indeterminate and the `value` prop will be ignored||-|
|max||Maximum value defining 100% progress made (must be higher than 'min')||-|
|min||Minimum value defining 'no progress' (must be lower than 'max')||-|
|size||The size of the circular progress in CSS units||-|
|thickness||The thickness of progress indicator as a ratio of `size`. Must be between `0` and `1`||-|
|trackColor||The color name of the progress track. Use a color key in the theme object||-|
|value||Current progress (must be between min/max)||-|
|valueText||The desired valueText to use in place of the value||-|