The API documentation of the CircularProgress React component. Learn more about the properties and the CSS customization points.
import CircularProgress from '@material-ui/core/CircularProgress';
If the progress bar is describing the loading progress of a particular region of a page,
you should use
aria-describedby to point to the progress bar, and set the
true on that region until it has finished loading.
|classes||object||Override or extend the styles applied to the component. See CSS API below for more details.|
|color||enum: 'primary' |
|'primary'||The color of the component. It supports those theme colors that make sense for this component.|
|size||union: number |
|40||The size of the circle.|
|thickness||number||3.6||The thickness of the circle.|
|value||number||0||The value of the progress indicator for the determinate and static variants. Value between 0 and 100.|
|variant||enum: 'determinate' |
|'indeterminate'||The variant to use. Use indeterminate when there is no progress value.|
ref is forwarded to the root element.
Any other properties supplied will be provided to the root element (native element).
You can override all the class names injected by Material-UI thanks to the
This property accepts the following keys:
|root||Styles applied to the root element.|
|static||Styles applied to the root element if
|indeterminate||Styles applied to the root element if
|colorPrimary||Styles applied to the root element if
|colorSecondary||Styles applied to the root element if
|svg||Styles applied to the
|circle||Styles applied to the
|circleStatic||Styles applied to the
|circleIndeterminate||Styles applied to the
|circleDisableShrink||Styles applied to the
If using the
overrides key of the theme,
you need to use the following style sheet name:
The component is fully StrictMode compatible.