Progress Ring

sl-progress-ring

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

Examples

Basic Progress Ring

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

sl-progress-ring value="25"

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>

sl-progress-ring value="50" style="--size: 200px;"

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>

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

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>

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

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>

sl-progress-ring value="50" label="Upload progress"

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="minus" 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>

sl-progress-ring.progress-ring-values value="50" style="margin-bottom: .5rem;" 50%
br
sl-button circle=true
  sl-icon name="minus" label="Decrease"
sl-button circle=true
  sl-icon name="plus" label="Increase"

javascript:
  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}%`;
  });

Component Props

Property Default Details

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

value

0

number

The current progress as a percentage, 0 to 100.

label

''

string

A custom label for assistive devices.

updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Slots

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

Learn more about using slots.

Custom Properties

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

CSS Parts

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

Learn more about customizing CSS parts.