Pular para o conteúdo
Ajude a traduzir esta página

LinearProgress API

Documentação da API para o componente React LinearProgress . Aprenda sobre as propriedades disponíveis e a API CSS.

Importação

import LinearProgress from '@mui/material/LinearProgress';
// ou
import { LinearProgress } from '@mui/material';
Você pode aprender sobre a diferença lendo este guia sobre como minimizar o tamanho do pacote.

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.

Nome do componente

The name MuiLinearProgress can be used when providing default props or style overrides in the theme.

Propriedades

Props of the nativo component are also available.

NomeTipoPadrãoDescrição
classesobject
Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
color'inherit'
| 'primary'
| 'secondary'
| string		'primary'
A cor do componente. Ela da suporte para as cores do tema que fazem sentido para este componente.
sxfunc
| object
The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
valuenumber
The value of the progress indicator for the determinate and buffer variants. Value between 0 and 100.
valueBuffernumber
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.

O ref é encaminhado para o elemento raiz.

CSS

Nome da regraClasse globalDescrição
root.MuiLinearProgress-rootEstilos aplicados ao elemento raiz.
colorPrimary.MuiLinearProgress-colorPrimaryEstilos aplicados para the root and bar2 element se color="primary"; bar2 if variant="buffer".
colorSecondary.MuiLinearProgress-colorSecondaryEstilos aplicados para the root and bar2 elements se color="secondary"; bar2 if variant="buffer".
determinate.MuiLinearProgress-determinateEstilos aplicados para o elemento raiz se variant="determinate".
indeterminate.MuiLinearProgress-indeterminateEstilos aplicados para o elemento raiz se variant="indeterminate".
buffer.MuiLinearProgress-bufferEstilos aplicados para o elemento raiz se variant="buffer".
query.MuiLinearProgress-queryEstilos aplicados para o elemento raiz se variant="query".
dashed.MuiLinearProgress-dashedEstilos aplicados para the additional bar element se variant="buffer".
dashedColorPrimary.MuiLinearProgress-dashedColorPrimaryEstilos aplicados para the additional bar element se variant="buffer" and color="primary".
dashedColorSecondary.MuiLinearProgress-dashedColorSecondaryEstilos aplicados para the additional bar element se variant="buffer" and color="secondary".
bar.MuiLinearProgress-barEstilos aplicados a the layered bar1 and bar2 elements.
barColorPrimary.MuiLinearProgress-barColorPrimaryEstilos aplicados para the bar elements se color="primary"; bar2 if variant not "buffer".
barColorSecondary.MuiLinearProgress-barColorSecondaryEstilos aplicados para the bar elements se color="secondary"; bar2 if variant not "buffer".
bar1Indeterminate.MuiLinearProgress-bar1IndeterminateEstilos aplicados para the bar1 element se variant="indeterminate or query".
bar1Determinate.MuiLinearProgress-bar1DeterminateEstilos aplicados para the bar1 element se variant="determinate".
bar1Buffer.MuiLinearProgress-bar1BufferEstilos aplicados para the bar1 element se variant="buffer".
bar2Indeterminate.MuiLinearProgress-bar2IndeterminateEstilos aplicados para the bar2 element se variant="indeterminate or query".
bar2Buffer.MuiLinearProgress-bar2BufferEstilos aplicados para the bar2 element se variant="buffer".

Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:

Demonstrações