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

CircularProgress API

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

Importação

import CircularProgress from '@mui/material/CircularProgress';
// ou
import { CircularProgress } 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 MuiCircularProgress can be used when providing default props or style overrides in the theme.

Propriedades

Propriedades do componente nativo também estão disponíveis.

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'
| 'error'
| 'info'
| 'success'
| 'warning'
| string		'primary'
The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.
disableShrinkboolfalse
If true, the shrink animation is disabled. This only works if variant is indeterminate.
sizenumber
| 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'.
sxArray<func
| object
| bool>
| func
| object
The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
thicknessnumber3.6
The thickness of the circle.
valuenumber0
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.

O ref é encaminhado para o elemento raiz.

CSS

Nome da regraClasse globalDescrição
root.MuiCircularProgress-rootEstilos aplicados ao elemento raiz.
determinate.MuiCircularProgress-determinateEstilos aplicados para o elemento raiz se variant="determinate".
indeterminate.MuiCircularProgress-indeterminateEstilos aplicados para o elemento raiz se variant="indeterminate".
colorPrimary.MuiCircularProgress-colorPrimaryEstilos aplicados para o elemento raiz se color="primary".
colorSecondary.MuiCircularProgress-colorSecondaryEstilos aplicados para o elemento raiz se color="secondary".
svg.MuiCircularProgress-svgEstilos aplicados a the svg element.
circle.MuiCircularProgress-circleEstilos aplicados a the `circle` svg path.
circleDeterminate.MuiCircularProgress-circleDeterminateEstilos aplicados para the `circle` svg path se variant="determinate".
circleIndeterminate.MuiCircularProgress-circleIndeterminateEstilos aplicados para the `circle` svg path se variant="indeterminate".
circleDisableShrink.MuiCircularProgress-circleDisableShrinkEstilos aplicados para the `circle` svg path se disableShrink={true}.

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

Demonstrações