LinearProgress API
API documentation for the React LinearProgress component. Learn about the available props, and the CSS API.
Import
import LinearProgress from '@material-ui/core/LinearProgress';
// or
import { LinearProgress } 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 nameMuiLinearProgress 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 | 'primary' | 'secondary' | 'primary' | The color of the component. It supports those theme colors that make sense for this component. |
| value | number | The value of the progress indicator for the determinate and buffer variants. Value between 0 and 100. | |
| valueBuffer | number | The value for the buffer variant. Value between 0 and 100. | |
| variant | 'buffer' | 'determinate' | 'indeterminate' | 'query' | 'indeterminate' | The variant to use. Use indeterminate or query 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 | .MuiLinearProgress-root | Styles applied to the root element. |
| colorPrimary | .MuiLinearProgress-colorPrimary | Styles applied to the root and bar2 element if color="primary"; bar2 if variant="buffer". |
| colorSecondary | .MuiLinearProgress-colorSecondary | Styles applied to the root and bar2 elements if color="secondary"; bar2 if variant="buffer". |
| determinate | .MuiLinearProgress-determinate | Styles applied to the root element if variant="determinate". |
| indeterminate | .MuiLinearProgress-indeterminate | Styles applied to the root element if variant="indeterminate". |
| buffer | .MuiLinearProgress-buffer | Styles applied to the root element if variant="buffer". |
| query | .MuiLinearProgress-query | Styles applied to the root element if variant="query". |
| dashed | .MuiLinearProgress-dashed | Styles applied to the additional bar element if variant="buffer". |
| dashedColorPrimary | .MuiLinearProgress-dashedColorPrimary | Styles applied to the additional bar element if variant="buffer" and color="primary". |
| dashedColorSecondary | .MuiLinearProgress-dashedColorSecondary | Styles applied to the additional bar element if variant="buffer" and color="secondary". |
| bar | .MuiLinearProgress-bar | Styles applied to the layered bar1 and bar2 elements. |
| barColorPrimary | .MuiLinearProgress-barColorPrimary | Styles applied to the bar elements if color="primary"; bar2 if variant not "buffer". |
| barColorSecondary | .MuiLinearProgress-barColorSecondary | Styles applied to the bar elements if color="secondary"; bar2 if variant not "buffer". |
| bar1Indeterminate | .MuiLinearProgress-bar1Indeterminate | Styles applied to the bar1 element if variant="indeterminate or query". |
| bar1Determinate | .MuiLinearProgress-bar1Determinate | Styles applied to the bar1 element if variant="determinate". |
| bar1Buffer | .MuiLinearProgress-bar1Buffer | Styles applied to the bar1 element if variant="buffer". |
| bar2Indeterminate | .MuiLinearProgress-bar2Indeterminate | Styles applied to the bar2 element if variant="indeterminate or query". |
| bar2Buffer | .MuiLinearProgress-bar2Buffer | Styles applied to the bar2 element if variant="buffer". |
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.