Components

Progress Bar

<wa-progress-bar> Since 2.0 Stable

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

Just want the styles? Check out the Progress Bar native styles! 
<wa-progress-bar value="40">
  <wa-icon slot="prefix" name="tasks"></wa-icon>
</wa-progress-bar>

Examples

Labels

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

Use the height CSS property to set the progress bar's height.

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

Showing Values

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-icon-button pill name="minus" label="Decrease"></wa-icon-button>
    <wa-icon-button pill name="plus" label="Increase"></wa-icon-button>
  </div>
</div>

<script>
  const progressBar = document.querySelector('#progress-bar-demo');
  const subtractButton = document.querySelector('wa-icon-button[name="minus"]');
  const addButton = document.querySelector('wa-icon-button[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

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

Learn more about using slots.

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

Attributes & Properties

Learn more about attributes and properties.

Name Description Reflects
value
value
The current progress as a percentage, 0 to 100.
Type number
Default 0
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 ''

CSS custom properties

Learn more about CSS custom properties.

Name Description
--indicator-color
The color of the indicator.
--display
Set to none to hide the element, or any other valid display value to override the internal display value of the base part.

CSS parts

Learn more about CSS parts.

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

Importing

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

CDN npm React

To manually import this component from the CDN, use the following code. 

import 'https://early.webawesome.com/[email protected]/dist/components/progress-bar/progress-bar.js';
Coming soon! Coming soon!
    No results