@dev.mohe/mwc-circular-progress NPM

`<mwc-circular-progress>`

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.

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

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

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

None

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.

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

None

Name	Default	Description
`--mdc-circular-progress-track-color`	transparent	Sets the track color of the determinate progress bar.

This component exposes the following global theming custom properties.

Name	Description
`--mdc-theme-primary`	Sets the color of primary progress bar.

5 years ago