CircularProgress

The CircularProgress component is used to indicate the progress for determinate and indeterminate processes.

View source View theme source View storybook

Imports

CircularProgress - main progress component
CircularProgressBar - progress bar component
CircularProgressWrapper - progress track component

Usage

Min max values

Indeterminate progress

By setting the value prop to null, progress' state becomes indeterminate

CircularProgress sizes

CircularProgress comes with 3 sizes sm md & lg

Customizing CircularProgress

To customize the appearance of the CircularProgress component we can simply pass down children components (CircularProgressWrapper, CircularProgressBar) for more control.

API Reference

Prop	Type	Default
`size`	`union`	`md`
`value`	`number`	-
`min`	`number`	-
`max`	`number`	-

CircularProgressBar

Prop	Type	Default
`trackStyle`	`string`	-
`innerTrackStyle`	`string`	-