<wa-progress-ring>
Progress rings are used to show the progress of a determinate operation in a circular fashion.
<wa-progress-ring value="25"></wa-progress-ring>
Use the --size custom property to set the diameter of the progress ring.
<wa-progress-ring value="50" style="--size: 200px;"></wa-progress-ring>
Use the --track-width and --indicator-width custom properties to set the width of
the progress ring's track and indicator.
<wa-progress-ring value="50" style="--track-width: 6px; --indicator-width: 12px;"></wa-progress-ring>
To change the color, use the --track-color and --indicator-color custom properties.
<wa-progress-ring value="50" style=" --track-color: pink; --indicator-color: deeppink; " ></wa-progress-ring>
Use the label attribute to label the progress ring and tell assistive devices how to announce it.
<wa-progress-ring value="50" label="Upload progress"></wa-progress-ring>
Use the default slot to show a label inside the progress ring.
<wa-progress-ring value="50" class="progress-ring-values" style="margin-bottom: .5rem;">50%</wa-progress-ring> <br /> <wa-button circle><wa-icon name="minus" variant="solid" label="Decrease"></wa-icon></wa-button> <wa-button circle><wa-icon name="plus" variant="solid" label="Increase"></wa-icon></wa-button> <script> const progressRing = document.querySelector('.progress-ring-values'); const subtractButton = progressRing.nextElementSibling.nextElementSibling; const addButton = subtractButton.nextElementSibling; addButton.addEventListener('click', () => { const value = Math.min(100, progressRing.value + 10); progressRing.value = value; progressRing.textContent = `${value}%`; }); subtractButton.addEventListener('click', () => { const value = Math.max(0, progressRing.value - 10); progressRing.value = value; progressRing.textContent = `${value}%`; }); </script>
| Name | Description |
|---|---|
| (default) | A label to show inside the ring. |
| Name | Description | Reflects | |
|---|---|---|---|
valuevalue
|
The current progress as a percentage, 0 to 100.
Type
number
Default
0
|
|
|
labellabel
|
A custom label for assistive devices.
Type
string
Default
''
|
| Name | Description |
|---|---|
--size |
The diameter of the progress ring (cannot be a percentage).
|
--track-width |
The width of the track.
|
--track-color |
The color of the track.
|
--indicator-width |
The width of the indicator. Defaults to the track width.
|
--indicator-color |
The color of the indicator.
|
--indicator-transition-duration |
The duration of the indicator's transition when the value changes.
|
| Name | Description |
|---|---|
base |
The component's base wrapper. |
label |
The progress ring label. |
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.4/dist/components/progress-ring/progress-ring.js';