LinearProgressIndicador de progresso linear

O indicador de progresso linear mostra o andamento de uma tarefa ao usuário, como carregamento de dados ou envio de formulário.

Como usar

Importe o componente quando necessário:

import 'mdui/components/linear-progress.js';

Importe o tipo TypeScript do componente quando necessário:

import type { LinearProgress } from 'mdui/components/linear-progress.js';

Exemplo de uso:

<mdui-linear-progress></mdui-linear-progress>

Exemplos

Progresso determinado

O indicador de progresso linear por padrão é indeterminado. Você pode definir o progresso atual pelo atributo value, onde o valor máximo padrão é 1.

<mdui-linear-progress value="0.5"></mdui-linear-progress>

Fonte

Você também pode definir o valor máximo do progresso pelo atributo max.

<mdui-linear-progress value="30" max="100"></mdui-linear-progress>

Fonte

API

Propriedades

Atributo	Propriedade	Tipo	Padrão
`max`	`max`	`number`	`1`
O valor máximo do indicador de progresso. O padrão é `1`.
`value`	`value`	`number`	-
O valor atual do indicador de progresso. Se não for especificado, exibe o estado indeterminado.

CSS Parts

Nome
`indicator`
Parte do indicador.

Propriedades CSS personalizadas

Nome
`--shape-corner`
Tamanho da borda arredondada do componente. Pode ser um valor em pixels, mas é recomendado usar os design tokens.

Capítulo anterior

Layout Layout

Próximo capítulo

List Lista