Package Exports

@material/mwc-circular-progress
@material/mwc-circular-progress/mwc-circular-progress
@material/mwc-circular-progress/mwc-circular-progress-base
@material/mwc-circular-progress/mwc-circular-progress-base.js
@material/mwc-circular-progress/mwc-circular-progress.css
@material/mwc-circular-progress/mwc-circular-progress.css.js
@material/mwc-circular-progress/mwc-circular-progress.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@material/mwc-circular-progress) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

`<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.

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

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-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 primary progress bar.