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-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-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-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-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 | |
|---|---|---|---|
valuevalue |
The current progress as a percentage, 0 to 100.
Type
numberDefault
0 |
|
|
labellabel |
A custom label for assistive devices.
Type
stringDefault
'' |
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 | CSS selector |
|---|---|---|
base |
The component's base wrapper. |
::part(base)
|
label |
The progress ring 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-ring/progress-ring.js';
To manually import this component from React, use the following code.
import WaProgressRing from '@awesome.me/webawesome/dist/react/progress-ring';