Components

Progress Ring

<wa-progress-ring> Since 2.0 Stable

Progress rings are used to show the progress of a determinate operation in a circular fashion. 

<wa-progress-ring value="25">
  <wa-icon slot="prefix" name="circle-notch"></wa-icon>
</wa-progress-ring>

Examples

Size

Use the --size custom property to set the diameter of the progress ring.

<wa-progress-ring value="50" style="--size: 200px;">
  <wa-icon slot="prefix" name="expand"></wa-icon>
</wa-progress-ring>

Track and Indicator Width

Use the --track-width and --indicator-width custom properties to set the width of the progress ring's track and indicator.

<wa-progress-ring value="50" style="--track-width: 6px; --indicator-width: 12px;">
  <wa-icon slot="prefix" name="arrows-alt"></wa-icon>
</wa-progress-ring>

Colors

To change the color, use the --track-color and --indicator-color custom properties.

<wa-progress-ring
  value="50"
  style="
    --track-color: pink;
    --indicator-color: deeppink;
  "
>
  <wa-icon slot="prefix" name="palette"></wa-icon>
</wa-progress-ring>

Labels

Use the default slot to show a label inside the progress ring.

50% 
<wa-progress-ring value="50" class="progress-ring-values" style="margin-bottom: .5rem;">50%</wa-progress-ring>

<br />

<wa-button circle><wa-icon name="minus" variant="solid" label="Decrease"></wa-icon></wa-button>
<wa-button circle><wa-icon name="plus" variant="solid" label="Increase"></wa-icon></wa-button>

<script>
  const progressRing = document.querySelector('.progress-ring-values');
  const subtractButton = progressRing.nextElementSibling.nextElementSibling;
  const addButton = subtractButton.nextElementSibling;

  addButton.addEventListener('click', () => {
    const value = Math.min(100, progressRing.value + 10);
    progressRing.value = value;
    progressRing.textContent = `${value}%`;
  });

  subtractButton.addEventListener('click', () => {
    const value = Math.max(0, progressRing.value - 10);
    progressRing.value = value;
    progressRing.textContent = `${value}%`;
  });
</script>

Slots

Learn more about using slots.

Name Description
(default) A label to show inside the ring.

Attributes & Properties

Learn more about attributes and properties.

Name Description Reflects
value
value
The current progress as a percentage, 0 to 100.
Type number
Default 0
label
label
A custom label for assistive devices.
Type string
Default ''

CSS custom properties

Learn more about CSS custom properties.

Name Description
--size
The diameter of the progress ring (cannot be a percentage).
--track-width
The width of the track.
--track-color
The color of the track.
--indicator-width
The width of the indicator. Defaults to the track width.
--indicator-color
The color of the indicator.
--indicator-transition-duration
The duration of the indicator's transition when the value changes.

CSS parts

Learn more about CSS parts.

Name Description
base The component's base wrapper.
label The progress ring label.

Importing

The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN npm React

To manually import this component from the CDN, use the following code. 

import 'https://early.webawesome.com/[email protected]/dist/components/progress-ring/progress-ring.js';
Coming soon! Coming soon!
    No results