---
schema_version: "1"
id: be0590365452391b7236ccc7d4d7da1158838c4d5a44bdc5d7bc05e04b699c98
title: Progress Ring
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/progressRing/lightning-progress-ring.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-progress-ring.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 1947880f5e5b6212b34842c4f1fa950cd89b12d92a6e37252c5da961fa1a8911
products:
  - Lightning Component Reference
---

# 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%.

<!-- prettier-ignore-start -->
```html
<lightning-progress-ring value="75"> </lightning-progress-ring>
```
<!-- prettier-ignore-end -->

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

|                | SLDS 1                                                                                                                                | SLDS 2                                                                                                          |
| :------------- | :------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------- |
| **Design**     | [Progress Ring](https://v1.lightningdesignsystem.com/components/progress-ring/)                                                       | [Progress Ring](https://www.lightningdesignsystem.com/components/progress-ring/)                                |
| **For Use In** | Lightning Experience, Experience Builder sites, Salesforce mobile app, Lightning Out (Beta), Standalone Lightning app, Mobile Offline | [Lightning Experience](https://help.salesforce.com/s/articleView?id=xcloud.customize_ui_enhancedlex.htm&type=5) |

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

<!-- prettier-ignore-start -->
```html
<lightning-progress-ring value="80"> </lightning-progress-ring>
```
<!-- prettier-ignore-end -->

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.

<!-- prettier-ignore-start -->
```html
<lightning-progress-ring value="75" variant="active-step">
</lightning-progress-ring>
```
<!-- prettier-ignore-end -->

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.

<!-- prettier-ignore-start -->
```html
<lightning-progress-ring value="80" variant="warning">
</lightning-progress-ring>
```
<!-- prettier-ignore-end -->

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.

<!-- prettier-ignore-start -->
```html
<lightning-progress-ring value="0" variant="expired"> </lightning-progress-ring>
```
<!-- prettier-ignore-end -->

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.

<!-- prettier-ignore-start -->
```html
<lightning-progress-ring value="100" variant="base-autocomplete">
</lightning-progress-ring>
```
<!-- prettier-ignore-end -->

### 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](https://v1.lightningdesignsystem.com/utilities/alignment) 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"}

:::::

::::::