Progress Bar
<wa-progress-bar>
Progress bars are used to show the status of an ongoing operation.
<wa-progress-bar value="40"></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 --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
Jump to heading
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
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
Learn more about using slots.
| Name | Description |
|---|---|
| (default) | A label to show inside the progress indicator. |
Attributes & Properties
Jump to heading
Learn more about attributes and properties.
| Name | Description | Reflects | |
|---|---|---|---|
valuevalue |
The current progress as a percentage, 0 to 100.
Type
numberDefault
0 |
|
|
indeterminateindeterminate |
When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.
Type
booleanDefault
false |
|
|
labellabel |
A custom label for assistive devices.
Type
stringDefault
'' |
CSS custom properties
Jump to heading
Learn more about CSS custom properties.
| Name | Description |
|---|---|
--track-height |
The color of the track.
Default
1rem
|
--track-color |
The color of the track.
Default
var(--wa-color-neutral-fill-normal)
|
--indicator-color |
The color of the indicator.
Default
var(--wa-color-brand-fill-loud)
|
CSS parts
Jump to heading
Learn more about CSS parts.
| Name | Description | CSS selector |
|---|---|---|
base |
The component's base wrapper. |
::part(base)
|
indicator |
The progress bar's indicator. |
::part(indicator)
|
label |
The progress bar's label. |
::part(label)
|
Importing
Jump to heading
Autoloading components via projects is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
Let your project code do the work! Sign up for free to use a project with your very own CDN — it's the fastest and easiest way to use Web Awesome.
To manually import this component from NPM, use the following code.
import '@awesome.me/webawesome/dist/components/progress-bar/progress-bar.js';
To manually import this component from React, use the following code.
import WaProgressBar from '@awesome.me/webawesome/dist/react/progress-bar';