Progress Bar progress bar link

Full documentation: https://webawesome.com/docs/components/progress-bar

<wa-progress-bar> Stable Since 2.0

Progress bars show how far along an ongoing operation is as a horizontal fill. Use them for file uploads, multi-step flows, or any task with measurable progress.

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

Examples examples link

Labels labels link

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 custom height link

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

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

Showing Values showing values link

Use the default slot to show a value.

<div class="wa-stack">
  <wa-progress-bar value="50" id="progress-bar-demo">50%</wa-progress-bar>

  <div>
    <wa-button pill appearance="filled">
      <wa-icon name="minus" label="Decrease"></wa-icon>
    </wa-button>
    <wa-button pill appearance="filled">
      <wa-icon name="plus" label="Increase"></wa-icon>
    </wa-button>
  </div>
</div>

<script>
  const progressBar = document.querySelector('#progress-bar-demo');
  const subtractButton = document.querySelector('wa-button:has(wa-icon[name="minus"])');
  const addButton = document.querySelector('wa-button:has(wa-icon[name="plus"])');

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

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>

Importing importing link

If you’re using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.

**CDN**

Import this component directly from the CDN:

import 'https://ka-f.webawesome.com/webawesome@3.7.0/components/progress-bar/progress-bar.js';

**npm**

After installing Web Awesome via npm, import this component:

import '@awesome.me/webawesome/dist/components/progress-bar/progress-bar.js';

**Self-Hosted**

If you’re self-hosting Web Awesome, import this component from your server:

import './webawesome/dist/components/progress-bar/progress-bar.js';

**React**

To import this component for React 18 or below, use the following code:

import WaProgressBar from '@awesome.me/webawesome/dist/react/progress-bar/index.js';

Slots slots link

Learn more about using slots.

Attributes & Properties attributes properties link

Learn more about attributes and properties.

CSS custom properties css custom properties link

Learn more about CSS custom properties.

CSS parts css parts link

Learn more about CSS parts.

Need a hand? Report a bug Ask for help