LinearProgress

Linear progress indicators are horizontal bars that display the status of ongoing operations, such as data loading or form submission.

Usage

Import the component:

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

Import the TypeScript type:

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

Example:

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

Examples

Determinate Progress

By default, the linear progress indicator is in an indeterminate state. Use the value attribute to set the current progress. The default maximum progress value is 1.

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

Code

Set the maximum progress value with the max attribute.

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

Code

API

Properties

Attribute	Property	Type	Default
`max`	`max`	`number`	`1`
Sets the maximum value for the progress indicator. The default value is `1`.
`value`	`value`	`number`	-
Sets the current value of the progress indicator. If not specified, the progress indicator is in an indeterminate state.

CSS Parts

Name
`indicator`
The indicator part.

CSS Custom Properties

Name
`--shape-corner`
The size of the component corner. You can use a specific pixel value, but it's recommended to reference design tokens.

Layout

Up Next

List