Circular Progress

A circular progress indicator is a visual representation of progress toward a specific goal.

Overview

API

Usage


  <wc-circular-progress value="40"></wc-circular-progress>


  <wc-circular-progress label="Indeterminate" helper-text="Testing" indeterminate="true"></wc-circular-progress>


  <wc-circular-progress label="Indeterminate" inline="true" helper-text="Testing" indeterminate="true"></wc-circular-progress>

Color Variants



  <wc-circular-progress indeterminate="true"></wc-circular-progress>
  <wc-circular-progress style="--progress-container-color: var(--color-error)" indeterminate="true"></wc-circular-progress>
  <wc-circular-progress style="--progress-container-color: var(--color-warning)" indeterminate="true"></wc-circular-progress>
  <wc-circular-progress style="--progress-container-color: var(--color-success)" indeterminate="true"></wc-circular-progress>

Sizes

Fancy larger or smaller spinners? Add size attribute for additional sizes.


  <wc-circular-progress style="--progress-height: 10rem" indeterminate="true"></wc-circular-progress>
  <wc-circular-progress style="--progress-height: 5rem; --progress-line-thickness: 20px" indeterminate="true"></wc-circular-progress>

Circular Progress

Usage

Color Variants

Sizes

Properties

Events

Methods

CSS Custom Properties