0.27.0 • Published 2 years ago

@material/mwc-circular-progress v0.27.0

Weekly downloads
3,005
License
Apache-2.0
Repository
github
Last release
2 years ago

<mwc-circular-progress> Published on npm

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

Demo

Example usage

Determinate

<script type="module">
  import '@material/mwc-circular-progress/mwc-circular-progress.js';
</script>
<mwc-circular-progress progress="0.7"></mwc-circular-progress>

Indeterminate

<mwc-circular-progress indeterminate></mwc-circular-progress>

Styled

<style>
  mwc-circular-progress {
    --mdc-theme-primary: red;
  }
</style>
<mwc-circular-progress indeterminate></mwc-circular-progress>

API

Slots

None

Properties/Attributes

NameTypeDefaultDescription
indeterminatebooleanfalseSets the circular-progress into its indeterminate state.
progressnumber0Sets the progress bar's value. Value should be between 0, 1.
densitynumber0Sets the progress indicator's sizing based on density scale. Minimum value is -8. Each unit change in density scale corresponds to 4px change in side dimensions. The stroke width adjusts automatically.
closedbooleanfalseSets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.

Methods

NameDescription
open() => voidSets CircularProgress.closed to false;
close() => voidSets CircularProgress.closed to true;

Events

None

CSS Custom Properties

NameDefaultDescription
--mdc-circular-progress-track-colortransparentSets the track color of the determinate progress bar.

Global Custom Properties

This component exposes the following global theming custom properties.

NameDescription
--mdc-theme-primarySets the color of primary progress bar.
0.27.0

2 years ago

0.26.1

2 years ago

0.26.0

2 years ago

0.25.3

3 years ago

0.25.2

3 years ago

0.25.1

3 years ago

0.25.0

3 years ago

0.23.0

3 years ago

0.22.1

3 years ago

0.22.0

3 years ago

0.21.0

3 years ago

0.20.0

3 years ago

0.19.1

4 years ago

0.19.0

4 years ago

0.18.0

4 years ago