Progress Bar
<wa-progress-bar>
Progress bars are used to show the status of an ongoing operation.
<wa-progress-bar value="40"> <wa-icon slot="prefix" name="tasks"></wa-icon> </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
CSS 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.
<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 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 | |
---|---|---|---|
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 Jump to heading
Learn more about CSS custom properties.
Name | Description |
---|---|
--indicator-color |
The color of the indicator.
|
CSS parts Jump to heading
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 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.
To manually import this component from the CDN, use the following code.
import 'https://early.webawesome.com/webawesome@3.0.0-alpha.12/dist/components/progress-bar/progress-bar.js';