Package Exports

@material/mwc-linear-progress

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@material/mwc-linear-progress) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

Material Design Guidelines: Progress Indicators

Installation

npm install @material/mwc-linear-progress

NOTE: The Material Web Components are distributed as ES2017 JavaScript Modules, and use the Custom Elements API. They are compatible with all modern browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional tooling step is required to resolve bare module specifiers, as well as transpilation and polyfills for IE11. See here for detailed instructions.

Example usage

Determinate

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

Indeterminate

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

Determinate buffer

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

Reversed

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

Styled

<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 `Slider.closed` to `false`;
`close() => void`	Sets `Slider.closed` to `true`;

Events

None

CSS Custom Properties

Name	Default	Description
`--mdc-theme-primary`	`#6200EE`	Sets the color of primary progress bar.
`--mdc-linear-progress-buffer-color`	`#E6E6E6`	Sets the color of the buffer progress bar. 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 #).

Additional references

MDC Web linear-progresss