CircularProgress API
API documentation for the React CircularProgress component. Learn about the available props, and the CSS API.
Import
import CircularProgress from '@material-ui/core/CircularProgress';
// or
import { CircularProgress } from '@material-ui/core';## ARIA 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 aria-busy
attribute to true on that region until it has finished loading.Component name
The nameMuiCircularProgress can be used when providing default props or style overrides in the theme.Props
| Name | Type | Default | Description |
|---|---|---|---|
| classes | object | Override or extend the styles applied to the component. See CSS API below for more details. | |
| color | 'inherit' | 'primary' | 'secondary' | 'primary' | The color of the component. It supports those theme colors that make sense for this component. |
| disableShrink | bool | false | If true, the shrink animation is disabled. This only works if variant is indeterminate. |
| size | number | string | 40 | The size of the circle. If using a number, the pixel unit is assumed. If using a string, you need to provide the CSS unit, e.g '3rem'. |
| thickness | number | 3.6 | The thickness of the circle. |
| value | number | 0 | The value of the progress indicator for the determinate variant. Value between 0 and 100. |
| variant | 'determinate' | 'indeterminate' | 'indeterminate' | The variant to use. Use indeterminate when there is no progress value. |
The
ref is forwarded to the root element.Any other props supplied will be provided to the root element (native element).
CSS
| Rule name | Global class | Description |
|---|---|---|
| root | .MuiCircularProgress-root | Styles applied to the root element. |
| determinate | .MuiCircularProgress-determinate | Styles applied to the root element if variant="determinate". |
| indeterminate | .MuiCircularProgress-indeterminate | Styles applied to the root element if variant="indeterminate". |
| colorPrimary | .MuiCircularProgress-colorPrimary | Styles applied to the root element if color="primary". |
| colorSecondary | .MuiCircularProgress-colorSecondary | Styles applied to the root element if color="secondary". |
| svg | .MuiCircularProgress-svg | Styles applied to the `svg` element. |
| circle | .MuiCircularProgress-circle | Styles applied to the `circle` svg path. |
| circleDeterminate | .MuiCircularProgress-circleDeterminate | Styles applied to the `circle` svg path if variant="determinate". |
| circleIndeterminate | .MuiCircularProgress-circleIndeterminate | Styles applied to the `circle` svg path if variant="indeterminate". |
| circleDisableShrink | .MuiCircularProgress-circleDisableShrink | Styles applied to the `circle` svg path if disableShrink={true}. |
You can override the style of the component using one of these customization options:
- With a rule name of the
classesobject prop. - With a global class name.
- With a theme and an
styleOverridesproperty.