Progress Ring

lightning-progress-ring

Displays a circular progress indicator to provide feedback about an action or process. This component requires API version 48.0 and later.

For Use In

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline

::::::tabset{tabs='["Example", "Develop", "Specifications"]'}

:::::tab

::component-playground{component="progressRing" model="lwc" namespace="lightning"}

:::::

:::::tab

A lightning-progress-ring component is a circular progress indicator. It shows a value from 0 to 100 by filling the ring with a green color by default, and supports variants to change its styling. The color fill is displayed in a clockwise or counterclockwise direction. It informs users the status of a process or action, such as loading data or saving updates.

This example creates a progress ring in a clockwise direction with a value of 75, which fills three quarters of the ring, or 75%.

<lightning-progress-ring value="75"> </lightning-progress-ring>

Design

lightning-progress-ring implements the progress bar blueprint in the Salesforce Lightning Design System (SLDS). The progress ring adapts to SLDS 1 or SLDS 2 styling based on the org's theme or the container app that you use.

Component Styling

Use a combination of variants, sizes, and utility classes to customize the progress bar.

Variants

Use variants to change the ring's styling to provide contextual feedback to users, such as whether an action is successful, active, at risk of failing, or unsuccessful.

By default, the progress ring fills in with green as the value increases, to indicate success.

<lightning-progress-ring value="80"> </lightning-progress-ring>

To display an active step in blue, use the active-step variant. This variant indicates that the progress status is ongoing and not yet determined to be successful, at risk of failing, or unsuccessful.

<lightning-progress-ring value="75" variant="active-step">
</lightning-progress-ring>

To indicate a problem with an action or process, use the warning variant. This variant displays the warning icon inside the ring and uses a yellow fill color.

<lightning-progress-ring value="80" variant="warning">
</lightning-progress-ring>

To indicate an unsuccessful action or process, use the expired variant. This variant displays the error icon inside the ring and uses a red fill color.

<lightning-progress-ring value="0" variant="expired"> </lightning-progress-ring>

To indicate a successful action or process, use the base-autocomplete variant. This variant is styled the same as the default base variant when the value is 0 to 99. When the value is 100, the success icon displays as a checkmark on a green background matching the fill color of the ring.

<lightning-progress-ring value="100" variant="base-autocomplete">
</lightning-progress-ring>

Sizes

Adjust the progress ring sizes by using the size attribute with one of these values.

• medium is the default variant, which displays the progress ring with a dimension of 24px by 24px
• large displays the progress ring with a dimension of 32px by 32px

Utility Classes

To apply additional styling, use the SLDS utility classes with the class attribute.

Accessibility

The warning, expired, and base-autocomplete variants provide icons and descriptive text for accessibility. The active-step variant currently does not have either, so it's not accessible. The active-step and base default variant appear the same except for color. Consider this accessibility limitation when using the active-step variant.

:::::

:::::tab ::component-specification{component="progressRing" model="lwc" namespace="lightning"}

:::::

::::::