0.27.0 • Published 2 years ago

@material/mwc-circular-progress-four-color v0.27.0

Weekly downloads
1,132
License
Apache-2.0
Repository
github
Last release
2 years ago

<mwc-circular-progress-four-color> 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.

The four color circular progress indicator rotates between four colors in indeterminate mode.

Material Design Guidelines: Progress Indicators

Demo

Example usage

Determinate

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

Indeterminate

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

Styled

The four-color Circular Progress Indicator does not specify the value of the four colors by default. These colors may be specified as follows:

<style>
  mwc-circular-progress-four-color {
    --mdc-circular-progress-bar-color-1: #2196f3;
    --mdc-circular-progress-bar-color-2: #e91e63;
    --mdc-circular-progress-bar-color-3: #ffc107;
    --mdc-circular-progress-bar-color-4: #03dac5;
  }
</style>
<mwc-circular-progress-four-color indeterminate></mwc-circular-progress-four-color>

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-bar-color-1--mdc-theme-primarySets the first of the four rotating colors.
--mdc-circular-progress-bar-color-2--mdc-theme-primarySets the second of the four rotating colors.
--mdc-circular-progress-bar-color-3--mdc-theme-primarySets the third of the four rotating colors.
--mdc-circular-progress-bar-color-4--mdc-theme-primarySets the last of the four rotating colors.
--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 determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.
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