Preview

Installation

To import just the component styles, copy the following into your project’s styles.css file:

/* Core Styles */
@import url('https://kherrick.github.io/material-design-lite/css/core.css');
/* Material Icons */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
/* Roboto Font */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
/* Component Styles */
@import url('https://kherrick.github.io/material-design-lite/css/components/progress/style.css');

Usage

Start with a progress or div element and add the progress class name:

<progress class="progress"></progress>

By default, the progress indicator color will be the system default using the accent-color CSS variable.

Variants

Indeterminate

To make a progress indicator indeterminate add the indeterminate attribute:

<progress class="progress" indeterminate></progress>

Linear Determinate

The value is set as a CSS custom property on the progress element and also in the progress element’s value attribute for accessibility. The default progress element will be hidden.

The value is a percentage between 0 and 100.

<div class="progress linear" style="--progress: 75%">
  <progress value="75" max="100">75%</progress>
</div>

Linear Indeterminate

To make a linear progress indicator indeterminate add the indeterminate attribute:

<div class="progress linear indeterminate">
  <progress indeterminate>75%</progress>
</div>

Circular Determinate

The value is set as a CSS custom property on the progress element and also in the progress element’s value attribute for accessibility. The default progress element will be hidden.

The value is a percentage between 0 and 100.

<div class="progress circular" style="--progress: 35%">
  <progress value="35" max="100">35%</progress>
</div>

Circular Indeterminate

To make a circular progress indicator indeterminate add the indeterminate attribute:

<div class="progress circular indeterminate">
  <progress indeterminate>75%</progress>
</div>

Design Tokens

Resources

• MDN