Light Dark System
Get ready for more awesome! Web Awesome, the next iteration of Shoelace, is on Kickstarter. Read Our Story

Progress Bar

<sl-progress-bar> | SlProgressBar
Since 2.0 stable

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

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

import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';

const App = () => <SlProgressBar value={50} />;

Examples

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>

import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';

const App = () => <SlProgressBar 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>

import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';

const App = () => <SlProgressBar 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="dash" 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>

import { useState } from 'react';
import SlButton from '@shoelace-style/shoelace/dist/react/button';
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';

const App = () => {
  const [value, setValue] = useState(50);

  function adjustValue(amount) {
    let newValue = value + amount;
    if (newValue < 0) newValue = 0;
    if (newValue > 100) newValue = 100;
    setValue(newValue);
  }

  return (
    <>
      <SlProgressBar value={value}>{value}%</SlProgressBar>

      <br />

      <SlButton circle onClick={() => adjustValue(-10)}>
        <SlIcon name="dash" label="Decrease" />
      </SlButton>

      <SlButton circle onClick={() => adjustValue(10)}>
        <SlIcon name="plus" label="Increase" />
      </SlButton>
    </>
  );
};

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>

import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';

const App = () => <SlProgressBar indeterminate />;

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/components/progress-bar/progress-bar.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/components/progress-bar/progress-bar.js';

To import this component using a bundler:

import '@shoelace-style/shoelace/dist/components/progress-bar/progress-bar.js';

To import this component as a React component:

import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';

Slots

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

Learn more about using slots.

Properties

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

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.