# Linear Progress Component

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

## Usage {#usage}

Import the component:

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

Import the TypeScript type:

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

Example:

```html
<mdui-linear-progress></mdui-linear-progress>
```

## Examples {#examples}

### Determinate Progress {#example-value}

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`.

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

Set the maximum progress value with the `max` attribute.

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

## mdui-linear-progress API

### Properties

<table>
<thead>
  <tr>
    <th>Attribute</th>
    <th>Property</th>
    <th>Reflect</th>
    <th>Type</th>
    <th>Default</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>max</td>
    <td>max</td>
    <td>true</td>
    <td>number</td>
    <td>1</td>
    <td><p>Sets the maximum value for the progress indicator. The default value is <code>1</code>.</p>
</td>
  </tr>
  <tr>
    <td>value</td>
    <td>value</td>
    <td>false</td>
    <td>number</td>
    <td></td>
    <td><p>Sets the current value of the progress indicator. If not specified, the progress indicator is in an indeterminate state.</p>
</td>
  </tr>
</tbody>
</table>

### CSS Parts

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>indicator</td>
    <td><p>The indicator part.</p>
</td>
  </tr>
</tbody>
</table>

### CSS Custom Properties

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>--shape-corner</td>
    <td><p>The corner radius of the component. You can use a specific pixel value, but it is recommended to reference <a href="/en/docs/2/styles/design-tokens#shape-corner">design tokens</a>.</p>
</td>
  </tr>
</tbody>
</table>