@dev.mohe/mwc-circular-progress-four-color
TypeScript icon, indicating that this package has built-in type declarations

0.19.3 • Public • Published

<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 '@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.

Package Sidebar

Install

npm i @dev.mohe/mwc-circular-progress-four-color

Weekly Downloads

0

Version

0.19.3

License

Apache-2.0

Unpacked Size

42.7 kB

Total Files

16

Last publish

Collaborators

  • dev.mohe