Progress Ring

A lightning:progressRing component shows a value from 0 to 100 in a compact, circular visualization with optional icons and color themes. 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%.

1<lightning:progressRing value="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.

1<lightning:progressRing value="80" />

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.

1<lightning:progressRing value="80" variant="active-step" />

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.

1<lightning:progressRing value="80" variant="warning" />

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.

1<lightning:progressRing value="80" variant="expired" />

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.

1<lightning:progressRing value="100" variant="base-autocomplete" />

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.