Progress Ring Group

Progress ring groups render multiple progress rings together in nested or stacked layouts.

<wa-progress-ring-group colored-labels>
  <wa-progress-ring value="50" label="Profile" style="--indicator-color: tomato;"></wa-progress-ring>
  <wa-progress-ring value="25" label="Documents" style="--indicator-color: olive;"></wa-progress-ring>
</wa-progress-ring-group>

Examples

Basic usage

Render multiple wa-progress-ring children inside the group. Labels are extracted from each child's label attribute.

<wa-progress-ring-group>
  <wa-progress-ring value="50" label="50%"></wa-progress-ring>
  <wa-progress-ring value="25" label="25%"></wa-progress-ring>
</wa-progress-ring-group>

Adjust the size and gap

Use size to control the outer diameter and gap to increase the space between nested rings.

<wa-progress-ring-group size="200" gap="8">
  <wa-progress-ring value="50" label="Signed"></wa-progress-ring>
  <wa-progress-ring value="25" label="Reviewed"></wa-progress-ring>
  <wa-progress-ring value="15" label="Paid"></wa-progress-ring>
</wa-progress-ring-group>

Color the labels from each ring

Use the colored-labels attribute to let each extracted label inherit its ring's indicator color.

<wa-progress-ring-group colored-labels>
  <wa-progress-ring value="50" label="Tomato" style="--indicator-color: tomato;"></wa-progress-ring>
  <wa-progress-ring value="25" label="Olive" style="--indicator-color: olive;"></wa-progress-ring>
</wa-progress-ring-group>

Switch to stacked mode

Use mode="stacked" when you want all rings to share the same diameter and rotate around one another.

<wa-progress-ring-group mode="stacked">
  <wa-progress-ring value="50" label="Core" style="--indicator-color: indigo;"></wa-progress-ring>
  <wa-progress-ring value="25" label="Add-on" style="--indicator-color: deeppink;"></wa-progress-ring>
</wa-progress-ring-group>

Notes

• The group keeps child labels in sync when ring value, label, or inline style changes after initial render.
• coloredLabels remains the JavaScript property name; use colored-labels in HTML.
• This is a Yoummday-owned component and has no runtime alias for sl-progress-ring-group.

API

Importing

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.

import 'https://cdn.yoummday.com/packages/@yoummday/webawesome/0.5.1/dist/components/progress-ring-group/progress-ring-group.js';

import '@yoummday/webawesome/dist/components/progress-ring-group/progress-ring-group.js';

import './webawesome/dist/components/progress-ring-group/progress-ring-group.js';

import WaProgressRingGroup from '@yoummday/webawesome/dist/react/progress-ring-group/index.js';

Slots

Learn more about using slots.

Attributes & Properties

Learn more about attributes and properties.

CSS Parts

Learn more about CSS parts.

Dependencies

This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.

• <wa-progress-ring>