# @material/mwc-linear-progress

> Material Design linear progress web component

Latest version **0.27.0** (published 2022-08-12) · Apache-2.0 license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @material/mwc-linear-progress
pnpm add @material/mwc-linear-progress
yarn add @material/mwc-linear-progress
bun add @material/mwc-linear-progress
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.27.0 |
| Published | 2022-08-12 |
| First published | 2019-06-05 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 65.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11240 |
| Maintainers | yefim, abhiomkar, azakus, bicknellr, material-admin, aprigogin, patrickrodee, aomarks, emarquez, allanchen, esgonzalez, asyncliz, candysonya, ssuarez, taylorv |
| Keywords | material design, web components, line ripple |

## Links

- npm: https://www.npmjs.com/package/@material/mwc-linear-progress
- Repository: https://github.com/material-components/material-components-web-components
- Homepage: https://github.com/material-components/material-components-web-components#readme
- Issues: https://github.com/material-components/material-components-web-components/issues
- npm.io page: https://npm.io/package/@material/mwc-linear-progress

## Dependencies (5)

- [lit](https://npm.io/package/lit.md) ^2.0.0
- [tslib](https://npm.io/package/tslib.md) ^2.0.1
- [@material/theme](https://npm.io/package/@material/theme.md) =14.0.0-canary.53b3cad2f.0
- [@material/mwc-base](https://npm.io/package/@material/mwc-base.md) ^0.27.0
- [@material/linear-progress](https://npm.io/package/@material/linear-progress.md) =14.0.0-canary.53b3cad2f.0

## Recent versions

- 0.27.0 (latest) — 2022-08-12
- 0.26.0-canary.0af8ade5.0 (canary) — 2022-02-07
- 0.26.1 — 2022-05-09
- 0.26.0 — 2022-05-03
- 0.26.0-canary.69ba13b7.0 — 2022-01-19
- 0.26.0-canary.893fc857.0 — 2022-01-07
- 0.26.0-canary.2afff08e.0 — 2022-01-06
- 0.26.0-canary.b9d35b69.0 — 2022-01-05
- 0.26.0-canary.e1bcf14e.0 — 2021-12-28
- 0.26.0-canary.cf7ba5a9.0 — 2021-12-10
- 0.26.0-canary.3b2452cc.0 — 2021-12-09
- 0.26.0-canary.0547aeeb.0 — 2021-12-06
- 0.26.0-canary.345c2bb9.0 — 2021-12-02
- 0.26.0-canary.8067ce28.0 — 2021-11-04
- 0.26.0-canary.448f6cb9.0 — 2021-11-04
- … 693 more at https://npm.io/package/@material/mwc-linear-progress/versions

## README

# `<mwc-linear-progress>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-linear-progress.svg)](https://www.npmjs.com/package/@material/mwc-linear-progress)
> IMPORTANT: The Material Web Components are a work in progress and subject to
> major changes until 1.0 release.

Progress indicators express an unspecified wait time or display the length of a process.

<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/linear-progress/images/showcase.gif" height="45px">

[Material Design Guidelines: Progress Indicators](https://material.io/components/progress-indicators/#circular-progress-indicators)

[Demo](https://material-components.github.io/material-web/demos/linear-progress/)

## Example usage

### Determinate

<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/linear-progress/images/determinate.png" height="34px">

```html
<script type="module">
  import '@material/mwc-linear-progress/mwc-linear-progress.js';
</script>
<mwc-linear-progress progress="0.5"></mwc-linear-progress>
```

### Indeterminate

<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/linear-progress/images/indeterminate.gif" height="77px">

```html
<mwc-linear-progress indeterminate></mwc-linear-progress>
```

### Determinate buffer

<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/linear-progress/images/determinate-buffer.gif" height="45px">

```html
<mwc-linear-progress progress="0.25" buffer="0.5"></mwc-linear-progress>
```

### Reversed

<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/linear-progress/images/reversed.gif" height="45px">


```html
<mwc-linear-progress
    reverse
    progress="0.25"
    buffer="0.5">
</mwc-linear-progress>
```

### Styled

<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/linear-progress/images/styled.gif" height="45px">

```html
<style>
  mwc-linear-progress {
    --mdc-theme-primary: red;
    --mdc-linear-progress-buffer-color: orange;
    /* Note: all that was changed from default was "fill='orange'" */
    --mdc-linear-progress-buffering-dots-image:
        url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='orange'/%3E%3C/svg%3E");
  }
</style>
<mwc-linear-progress progress="0.25" buffer="0.5"></mwc-linear-progress>
```

## API

### Slots

None

### Properties/Attributes

| Name            | Type      | Default | Description
| --------------- | --------- | ------- |------------
| `indeterminate` | `boolean` | `false` | Sets the linear-progress into its indeterminate state.
| `progress`      | `number`  | `0`     | Sets the primary progress bar's value. Value should be between [0, 1].
| `buffer`        | `number`  | `1`     | Sets the buffer progress bar's value. Value should be between [0, 1]. Setting this value to be less than 1 will reveal moving, buffering dots.
| `reverse`       | `boolean` | `false` | Reverses the direction of the linear progress indicator.
| `closed`        | `boolean` | `false` | Sets the progress indicator to the closed state. Sets content opactiy to 0. Typically should be set to true when loading has finished.

### Methods

| Name              | Description
| ----------------- | -----------
| `open() => void`  | Sets `LinearProgress.closed` to `false`;
| `close() => void` | Sets `LinearProgress.closed` to `true`;

### Events

None

### CSS Custom Properties

| Name                                         | Default                                | Description
| -------------------------------------------- | -------------------------------------- |------------
| `--mdc-linear-progress-buffer-color`         | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/linear-progress/images/color_e6e6e6.png) `#E6E6E6` | Sets the color of the buffer progress bar.<br> **NOTE:** to change the color of the buffering dots, you must do so in the image of `--mdc-linear-progress-buffering-dots-image`.
| `--mdc-linear-progress-buffering-dots-image` | `url("<svg data url>")` (see below for value) | Sets the image to use as the buffering dots. This pattern is then repeated horizontally and animated.

Default value for `--mdc-linear-progress-buffering-dots-image`:

```
data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23e6e6e6'/%3E%3C/svg%3E
```

If you paste that data url into your browser you can see and inspect the SVG.
You may also notice that it is simply a colored circle with some transparent
space to its right. If you would like to change the color of the circle, you can
simply change the `fill="%23e6e6e6"` to any valid color property (n.b. `%23` is
the url-encoded equivalent of `#`).

#### Global Custom Properties

This component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)
custom properties.

| Name                                 | Description
| ------------------------------------ | -----------
| `--mdc-theme-primary`                | Sets the color of primary progress bar.

## Additional references

- [MDC Web linear-progresss](https://material-components.github.io/material-components-web-catalog/#/component/linear-progress-indicator)

---
_Source: https://npm.io/package/@material/mwc-linear-progress · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._