Progress Ring Group
Examples
Size
Gap
Labels
Display mode
Importing
Slots
Properties

Progress Ring Group

<sl-progress-ring-group> | SlProgressRingGroup

Since 2.52.0

stable

Progress ring groups are used to show multiple progress rings at once.

<sl-progress-ring-group>
	<sl-progress-ring value="50" style="--indicator-color: tomato;"></sl-progress-ring>
	<sl-progress-ring value="25" style="--indicator-color: olive;"></sl-progress-ring>
</sl-progress-ring-group>

Examples

Size

Use the size attribute to set the diameter.

<sl-progress-ring-group size="200">
	<sl-progress-ring value="50"></sl-progress-ring>
	<sl-progress-ring value="25"></sl-progress-ring>
</sl-progress-ring-group>

Gap

Use the gap attribute to set the distance between rings.

<sl-progress-ring-group gap="8">
	<sl-progress-ring value="50"></sl-progress-ring>
	<sl-progress-ring value="25"></sl-progress-ring>
</sl-progress-ring-group>

Labels

Use the label attributes for each ring to render labels. Use the coloredLabels boolean attribute to render the labels in their respective indicator color.

<sl-progress-ring-group>
	<sl-progress-ring value="50" label="50%"></sl-progress-ring>
	<sl-progress-ring value="25" label="25%"></sl-progress-ring>
</sl-progress-ring-group>
<sl-progress-ring-group coloredLabels>
	<sl-progress-ring value="50" label="Tomato" style="--indicator-color: tomato;"></sl-progress-ring>
	<sl-progress-ring value="25" label="Olive" style="--indicator-color: olive;"></sl-progress-ring>
</sl-progress-ring-group>

Display mode

Use the mode attribute to set change the rendering style.

When using stacked mode, remember to also set indicator colors.

<sl-progress-ring-group mode="stacked">
	<sl-progress-ring value="50" style="--indicator-color: indigo;"></sl-progress-ring>
	<sl-progress-ring value="25" style="--indicator-color: deeppink;"></sl-progress-ring>
</sl-progress-ring-group>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script

Import

Bundler

React

To import this component from the CDN using a script tag:

<script type="module" src="https://v2-54-0.yoummday-theme.pages.dev/components/progress-ring-group/progress-ring-group.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://v2-54-0.yoummday-theme.pages.dev/components/progress-ring-group/progress-ring-group.js';

To import this component using a bundler:

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

To import this component as a React component:

import SlProgressRingGroup from '@yoummday/ymmd-shoelace/dist/react/progress-ring-group';

Slots

Name	Description
(default)	Multiple `<sl-progress-ring>` elements to be included in the group.

Learn more about using slots.

Properties

Name	Description	Type	Default
`size`	The diameter of the rings in px	`number`	`128`
`gap`	The gap between each ring in px	`number`	`2`
`coloredLabels`	Show labels in their respective ring color	`boolean`	`false`
`mode`	The display mode	`'nested' \| 'stacked'`	`'nested'`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.