Progress Ring
<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-icon slot="prefix" name="circle-notch"></wa-icon> </wa-progress-ring>
Examples Jump to heading
Size Jump to heading
Use the --size
custom property to set the diameter of the progress ring.
<wa-progress-ring value="50" style="--size: 200px;"> <wa-icon slot="prefix" name="expand"></wa-icon> </wa-progress-ring>
Track and Indicator Width Jump to heading
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-icon slot="prefix" name="arrows-alt"></wa-icon> </wa-progress-ring>
Colors Jump to heading
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-icon slot="prefix" name="palette"></wa-icon> </wa-progress-ring>
Labels Jump to heading
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>
Slots Jump to heading
Learn more about using slots.
Name | Description |
---|---|
(default) | A label to show inside the ring. |
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 |
|
|
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 |
---|---|
--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.
|
CSS parts Jump to heading
Learn more about CSS parts.
Name | Description |
---|---|
base |
The component's base wrapper. |
label |
The progress ring 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-ring/progress-ring.js';