Progress Bar

<wa-progress-bar>

Stable

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

Link to This Section

Label

Link to This Section

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

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

Indeterminate

Link to This Section

Add the indeterminate attribute when an operation is pending but its progress can't be measured. In this state, value is ignored and the label, if present, isn't shown.

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

Customizing

Link to This Section

Set the --track-height custom property to change the bar's thickness, and --track-color / --indicator-color to recolor it.

<wa-progress-bar
  value="60"
  style="
    --track-height: 1.5rem;
    --track-color: var(--wa-color-neutral-fill-quiet);
    --indicator-color: var(--wa-color-success-fill-loud);
  "
></wa-progress-bar>

Showing Values

Link to This Section

Use the default slot to show a value inside the bar.

50%

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

  <wa-divider></wa-divider>

  <div class="wa-cluster">
    <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>

API

Link to This Section

Importing

Link to This Section

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

npm

Self-Hosted

React

Import this component directly from the CDN:

import 'https://ka-f.webawesome.com/[email protected]/components/progress-bar/progress-bar.js';

After installing Web Awesome via npm, import this component:

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

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

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

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

Link to This Section

Learn more about using slots.

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

Attributes & Properties

Link to This Section

Learn more about attributes and properties.

Name	Description	Reflects
`indeterminate` `indeterminate`	When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. Type `boolean` Default `false`
`label` `label`	A custom label for assistive devices. Type `string` Default `''`
`value` `value`	The current progress as a percentage, 0 to 100. Type `number` Default `0`

CSS Custom Properties

Link to This Section

Learn more about CSS custom properties.

Name	Description
`--indicator-color`	The color of the indicator. Default `var(--wa-color-brand-fill-loud)`
`--track-color`	The color of the track. Default `var(--wa-color-neutral-fill-normal)`
`--track-height`	The height of the track. Default `1rem`

CSS Parts

Link to This Section

Learn more about CSS parts.

Name	Description	CSS selector
`indicator`	The progress bar's indicator.	`::part(indicator)`
`label`	The progress bar's label.	`::part(label)`
`progress-bar`	The component's outer wrapper.	`::part(progress-bar)`
`base`	Deprecated. Use the `progress-bar` part instead.	`::part(base)`

Need a hand?

Report a bug

Ask for help

Progress Bar

Examples

Label

Indeterminate

Customizing

Showing Values

API

Importing

Slots

Attributes & Properties

CSS Custom Properties

CSS Parts

Quick Links

Recent Searches