Progress
Examples
Label
Show Values and labels
Height
Importing
Properties
Custom Properties
Dependencies

Progress

<sl-progress> | SlProgress

Since 2.0

experimental

Progress is used to show the status of an ongoing operation.

25%

75%

<sl-progress>
	<sl-progress-bar style="--indicator-color: tomato;" value="25">25%</sl-progress-bar>
	<sl-progress-bar style="--indicator-color: olive;" value="75">75%</sl-progress-bar>
</sl-progress>

Examples

Label

Use the progress-bars’ label attributes to show labels on top.

25%

75%

<sl-progress>
	<sl-progress-bar style="--indicator-color: tomato;" label="Tomato" value="25">25%</sl-progress-bar>
	<sl-progress-bar style="--indicator-color: olive;" label="Olive" value="75">75%</sl-progress-bar>
</sl-progress>

Show Values and labels

Use the showValuesAbove attribute to have a more eye-catching caption.

25%

75%

<sl-progress showValuesAbove>
	<sl-progress-bar style="--indicator-color: tomato;" label="Tomato" value="25">25%</sl-progress-bar>
	<sl-progress-bar style="--indicator-color: olive;" label="Olive" value="75">75%</sl-progress-bar>
</sl-progress>

Height

Use the --height custom property to set the height of the bar.

25%

75%

<sl-progress style="--height: 2rem;">
	<sl-progress-bar style="--indicator-color: tomato;" value="25">25%</sl-progress-bar>
	<sl-progress-bar style="--indicator-color: olive;" value="75">75%</sl-progress-bar>
</sl-progress>

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-58-0.yoummday-theme.pages.dev/components/progress/progress.js"></script>

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

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

To import this component using a bundler:

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

To import this component as a React component:

import SlProgress from '@yoummday/ymmd-shoelace/dist/react/progress';

Properties

Name	Description	Reflects	Type	Default
`showValuesAbove`	If true, bar values are shown above the labels		`boolean`	`false`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Custom Properties

Name	Description	Default
`--height`	The progress bars’ height.

Learn more about customizing CSS custom properties.

Dependencies

This component automatically imports the following dependencies.

<sl-progress-bar>