Progress Bar

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.

1<template>
2    <div class="slds-p-bottom_medium">
3        <lightning-button label={computedLabel} onclick={toggleProgress}>
4        </lightning-button>
5    </div>
6    <lightning-progress-bar value={progress}> </lightning-progress-bar>
7</template>

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.

1import { LightningElement } from "lwc";
2
3export default class DemoComponent extends LightningElement {
4  progress = 0;
5  isProgressing = false;
6
7  updateProgress() {
8    this.progress = this.progress === 100 ? this.resetProgress() : this.progress + 10;
9  }
10
11  resetProgress() {
12    this.progress = 0;
13    clearInterval(this._interval);
14  }
15
16  disconnectedCallback() {
17    clearInterval(this._interval);
18  }
19
20  get computedLabel() {
21    return this.isProgressing ? "Stop" : "Start";
22  }
23
24  toggleProgress() {
25    if (this.isProgressing) {
26      // stop
27      this.isProgressing = false;
28      if (!this.progress) {
29        this.progress = 0;
30      }
31      clearInterval(this._interval);
32    } else {
33      // start
34      this.isProgressing = true;
35      this._interval = setInterval(this.updateProgress.bind(this), 200);
36    }
37  }
38}

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.

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

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

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

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