LinearProgressProgreso lineal

El componente Progreso lineal es un indicador horizontal que se usa para mostrar al usuario el progreso de ejecución de una tarea, como la carga de datos o el envío de un formulario.

Uso

Importa el componente cuando lo necesites:

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

Importa el tipo TypeScript cuando lo necesites:

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

Uso:

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

Ejemplos

Establecer el progreso

El progreso lineal tiene un progreso indeterminado por defecto. El atributo value define el progreso actual; el valor máximo predeterminado es 1.

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

Fuente

También puedes usar el atributo max para establecer el valor máximo del progreso.

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

Fuente

API

Propiedades

Atributo	Propiedad	Tipo	Predeterminado
`max`	`max`	`number`	`1`
Valor máximo del indicador de progreso. Por defecto `1`.
`value`	`value`	`number`	-
Valor actual del indicador de progreso. Si no se especifica, está en estado indeterminado.

CSS Parts

Nombre
`indicator`
Parte del indicador.

CSS Custom Properties

Nombre
`--shape-corner`
Tamaño de la esquina redondeada del componente. Se puede especificar un valor de píxel concreto; pero se recomienda hacer referencia a design tokens.

Capítulo anterior

Layout Layout

Capítulo siguiente

List Lista