Circular Progress
A circular progress indicator is a visual representation of progress toward a specific goal.
Usage
<circular-progress value="40"></circular-progress>
<circular-progress label="Indeterminate" helper-text="Testing" indeterminate="true"></circular-progress>
<circular-progress label="Indeterminate" inline="true" helper-text="Testing" indeterminate="true"></circular-progress>
Color Variants
<circular-progress indeterminate="true"></circular-progress>
<circular-progress style="--progress-container-color: var(--color-error)" indeterminate="true"></circular-progress>
<circular-progress style="--progress-container-color: var(--color-warning)" indeterminate="true"></circular-progress>
<circular-progress style="--progress-container-color: var(--color-success)" indeterminate="true"></circular-progress>
Sizes
Fancy larger or smaller spinners? Add size attribute for additional sizes.
<circular-progress style="--progress-height: 10rem" indeterminate="true"></circular-progress>
<circular-progress style="--progress-height: 5rem; --progress-line-thickness: 20px" indeterminate="true"></circular-progress>