---
schema_version: "1"
id: 3db8a2e2fdc4a6a3a37a404d46e20320b93f477a6dba068f1060bc7e347b1298
title: Progress Bar
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/progressBar/lightning-progress-bar.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-progress-bar.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: e36cebb3cf1b5633342d4a0439b2e2d3a9a77f83bce5342decabb57698ed9df0
products:
  - Lightning Component Reference
---

# Progress Bar

**`lightning-progress-bar`**

Displays a horizontal progress bar from left to right to indicate the progress of an operation.

**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="progressBar" model="lwc" namespace="lightning"}


:::::

:::::tab

A `lightning-progress-bar` component shows the progress of an operation from
left to right, such as for a file download or upload.

This example loads the progress bar when you click the Start button.
The Start button becomes a Stop button when the progress bar is incrementing its value.

<!-- prettier-ignore-start -->
```html
<template>
    <div class="slds-p-bottom_medium">
        <lightning-button label={computedLabel} onclick={toggleProgress}>
        </lightning-button>
    </div>
    <lightning-progress-bar value={progress}> </lightning-progress-bar>
</template>
```
<!-- prettier-ignore-end -->

Here's the JavaScript that changes the value of the progress bar.
Specifying `this.progress === 100 ? this.resetProgress() : this.progress + 10`
increases the progress value by 10% and stops the animation when the progress
reaches 100%. The progress bar is updated every 200 milliseconds.

```javascript
import { LightningElement } from "lwc";

export default class DemoComponent extends LightningElement {
  progress = 0;
  isProgressing = false;

  updateProgress() {
    this.progress = this.progress === 100 ? this.resetProgress() : this.progress + 10;
  }

  resetProgress() {
    this.progress = 0;
    clearInterval(this._interval);
  }

  disconnectedCallback() {
    clearInterval(this._interval);
  }

  get computedLabel() {
    return this.isProgressing ? "Stop" : "Start";
  }

  toggleProgress() {
    if (this.isProgressing) {
      // stop
      this.isProgressing = false;
      if (!this.progress) {
        this.progress = 0;
      }
      clearInterval(this._interval);
    } else {
      // start
      this.isProgressing = true;
      this._interval = setInterval(this.updateProgress.bind(this), 200);
    }
  }
}
```

## Design

`lightning-progress-bar` implements the progress bar blueprint in the Salesforce Lightning Design System (SLDS). The progress bar adapt 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 Bars](https://v1.lightningdesignsystem.com/components/progress-bar/)                                                        | [Progress Bars](https://www.lightningdesignsystem.com/components/progress-bar/)                                 |
| **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

Specify the `variant` attribute using one of these values.

- `base` is the default variant, which shows a rectangular progress bar
- `circular` shows a progress bar with rounded ends

### Sizes

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

- `x-small` creates a progress bar with a height of 2px
- `small` creates a progress bar with a height of 4px
- `medium` is the default variant, which creates a progress bar with a height of 8px
- `large` creates a progress bar with a height of 12px

### Utility Classes

To apply additional styling, use the SLDS [utility classes](https://v1.lightningdesignsystem.com/utilities/alignment) with the `class` attribute.


:::::

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

:::::

::::::