Progress Ring

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 component implements styling from progress ring in the Lightning Design System.

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

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.

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.

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.

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.

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.

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 is 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.