<mwc-circular-progress-four-color>

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 '@dev.mohe/mwc-circular-progress-four-color';
</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 {
    --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

| Name | Type | Default | Description | --------------- | --------- | ------- | ----------- | indeterminate | boolean | false | Sets the circular-progress into its indeterminate state. | progress | number | 0 | Sets the progress bar's value. Value should be between [0, 1]. | density | number | 0 | Sets 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. | closed | boolean | false | Sets the progress indicator to the closed state. Sets content opacity to 0. Typically should be set to true when loading has finished.

Methods

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

Events

None

CSS Custom Properties

Name | Default | Description ------------------------------------- | ------------------------------------------------------------------- | ----------- --mdc-circular-progress-bar-color-1 | --mdc-theme-primary | Sets the first of the four rotating colors. --mdc-circular-progress-bar-color-2 | --mdc-theme-primary | Sets the second of the four rotating colors. --mdc-circular-progress-bar-color-3 | --mdc-theme-primary | Sets the third of the four rotating colors. --mdc-circular-progress-bar-color-4 | --mdc-theme-primary | Sets the last of the four rotating colors. --mdc-circular-progress-track-color | transparent | Sets the track color of the determinate progress bar.

Global Custom Properties

This component exposes the following global theming custom properties.

| Name | Description | ------------------------------------ | ----------- | --mdc-theme-primary | Sets the color of determinate progress bar. If the indeterminate four colors are unset, sets the color for indeterminate state as well.