Progress Bar

sl-progress-bar

Progress bars are used to show the status of an ongoing operation.

Examples

Basic Progress Bar

<sl-progress-bar value="50"></sl-progress-bar>

sl-progress-bar value="50"

Labels

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

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

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

Custom Height

Use the --height custom property to set the progress bar’s height.

<sl-progress-bar value="50" style="--height: 6px;"></sl-progress-bar>

sl-progress-bar value="50" style="--height: 6px;"

Showing Values

Use the default slot to show a value.

50%

<sl-progress-bar value="50" class="progress-bar-values">50%</sl-progress-bar>

<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 progressBar = document.querySelector('.progress-bar-values');
  const subtractButton = progressBar.nextElementSibling.nextElementSibling;
  const addButton = subtractButton.nextElementSibling;

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

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

sl-progress-bar.progress-bar-values value="50" 50%
br
sl-button circle=true
  sl-icon name="minus" label="Decrease"
sl-button circle=true
  sl-icon name="plus" label="Increase"

javascript:
  const progressBar = document.querySelector(.progress-bar-values);
  const subtractButton = progressBar.nextElementSibling.nextElementSibling;
  const addButton = subtractButton.nextElementSibling;

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

  subtractButton.addEventListener(click, () => {
  const value = Math.max(0, progressBar.value - 10);
  progressBar.value = value;
  progressBar.textContent = `${value}%`;
  });

Indeterminate

The indeterminate attribute can be used to inform the user that the operation is pending, but its status cannot currently be determined. In this state, value is ignored and the label, if present, will not be shown.

<sl-progress-bar indeterminate></sl-progress-bar>

sl-progress-bar indeterminate=true

Component Props

Property	Default	Details
`value`	`0`	`number` The current progress as a percentage, 0 to 100.
`indeterminate`	`false`	`boolean` When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.
`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 progress indicator.

Learn more about using slots.

Custom Properties

Name	Details
`--height`	The progress bar’s height.
`--track-color`	The color of the track.
`--indicator-color`	The color of the indicator.
`--label-color`	The color of the label.

Learn more about customizing CSS custom properties.

CSS Parts

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

Learn more about customizing CSS parts.