Circular Progress is used to indicate the progress for determinate and indeterminate processes.
You can add a size prop to the CircularProgress to add a custom size or choose from defined sizes.
You can add the thickness prop to update the thickness of the progress ring.
You can add the color prop to apply any color that the theme contains.
You can add the trackColor prop to apply any color that the theme contains to the CircularProgress track.
You can add min and max props to manage what is the start and end value of your CircularProgress.
Setting the progress to indeterminate means that the value can't be determined upfront. Pass the isIndeterminate prop to activate this state.
|size||The size of circular progress.|
|max||number||Maximum value defining 100% progress made (must be higher than 'min')||-|
|min||number||Minimum value defining 'no progress' (must be lower than 'max')||-|
|value||number||Current progress (must be between min/max)||-|
|isIndeterminate||boolean||Puts the component into indeterminate state. When passed, the 'value' prop is ignored||-|
|thickness||number, string||The thickness of the progress indicator||-|
|trackColor||string||The color name of the progress track. Use a color key from the theme object||-|
|color||string||The color of the progress indicator. Use a color key from the theme object||-|
|_text||TextProps||Text styling for Label Text.||-|
- On web and mobile, Progress has
progressbarto denote that it is a progress bar.
- On web,
aria-valuemaxto ensure the progress percent is visible to screen readers.
- On mobile, accessibilityValue is used to ensure it's announced by Talkback and VoiceOver.