Circular Progress is used to indicates the progress for determinate and indeterminate processes.
You can add
size prop to the progressbar 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 progressbar to apply any color that exists in
Chakra exports a
CircularProgressLabel to help you add a label. Pass this
component as children 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's a progress bar
aria-valuenowset to the percentage completion value passed to the component, to ensure the progress percent is visible to screen readers.
|size||The size of the circular progress in CSS units|
|max||Maximum value defining 100% progress made (must be higher than 'min')|
|min||Minimum value defining 'no progress' (must be lower than 'max')|
|value||Current progress (must be between min/max)|
|isIndeterminate||Puts the component into indeterminate state. When passed, the 'value' prop is ignored|
|thickness||The thickness of progress indicator|
|angle||Angle to rotate progress indicator by|
|children||The content of the circular progress bar. If passed, the content will be inside and centered in the progress bar|
|trackColor||The color name of the progress track. Use a color key in the theme object|
|color||The color of the progress indicator. Use a color key in the theme object|