Progress Ring

<sl-progress-ring> | SlProgressRing
Since 2.0 stable

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

<sl-progress-ring value="25"></sl-progress-ring>

Examples

Size

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

<sl-progress-ring value="50" style="--size: 200px;"></sl-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. 

<sl-progress-ring value="50" style="--track-width: 6px; --indicator-width: 12px;"></sl-progress-ring>

Colors

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

<sl-progress-ring
  value="50"
  style="
    --track-color: pink;
    --indicator-color: deeppink;
  "
></sl-progress-ring>

Labels

Use the label attribute to label the progress ring and tell assistive devices how to announce it. 

<sl-progress-ring value="50" label="Upload progress"></sl-progress-ring>

Showing Values

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

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

<br />

<sl-button circle><sl-icon name="dash" label="Decrease"></sl-icon></sl-button>
<sl-button circle><sl-icon name="plus" label="Increase"></sl-icon></sl-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

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

Learn more about using slots.

Properties

Name Description Reflects Type Default
value The current progress as a percentage, 0 to 100. number 0
label A custom label for assistive devices. string ''
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Custom Properties

Name Description Default
--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.

Learn more about customizing CSS custom properties.

Parts

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

Learn more about customizing CSS parts.