Progress Ring

<wa-progress-ring> Since 2.0 stable

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

Size

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

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

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

Use the default slot to show a label inside the progress ring.

50% 
<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

Learn more about using slots.

Attributes & Properties

Learn more about attributes and properties.

CSS custom properties

Learn more about CSS custom properties.

CSS parts

Learn more about CSS parts.

Importing

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.

CDN npm React

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';
Need a hand? Report a bug Ask for help
    No results