Progress Bar

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

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

Examples Jump to heading #

Labels Jump to heading #

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

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

Custom Height Jump to heading #

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

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

Showing Values Jump to heading #

Use the default slot to show a value.

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

<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 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>

Indeterminate Jump to heading #

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.

<wa-progress-bar indeterminate></wa-progress-bar>

Slots Jump to heading #

Properties Jump to heading #

CSS custom properties Jump to heading #

CSS parts Jump to heading #

Importing Jump to heading #

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

import 'https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/components/progress-bar/progress-bar.js';