How to show progress bar in lwc component - Salesforce Globe For You
Solution: Use lightning-progress-indicator component to show the progress of a process.
Example:
displayProgressBarLWC.html
<template>
<lightning-Card title="Progress Bar">
<div style="padding:5px;">
<lightning-progress-indicator type="base" current-step={currentState}>
<lightning-progress-step label="Step One" value="1">
</lightning-progress-step>
<lightning-progress-step label="Step Two" value="2">
</lightning-progress-step>
<lightning-progress-step label="Step Three" value="3">
</lightning-progress-step>
<lightning-progress-step label="Step Four" value="4">
</lightning-progress-step>
</lightning-progress-indicator>
</div>
<div> This Component show Progress.Use Previous and next buttons to navigate or change steps</div>
<div style="padding:5px;">
<lightning-button variant="brand-outline" label="Previous" title="Primary action with lighter look" onclick={handlePrevious} class="slds-m-left_x-small"></lightning-button>
<lightning-button variant="brand-outline" label="Next" title="Primary action with lighter look" onclick={handleNext} class="slds-m-left_x-small"></lightning-button>
</div>
</lightning-Card>
</template>
displayProgressBarLWC.js
import { LightningElement,api } from 'lwc';
export default class DisplayProgressBarLWC extends LightningElement {
@api currentState = 1;
handleNext() {
if(parseInt(this.currentState) != 4) {
var counter = parseInt(this.currentState);
counter = counter +1;
this.currentState = String(counter);
console.log(this.currentState);
}
}
handlePrevious() {
if(parseInt(this.currentState) != 1) {
var counter = parseInt(this.currentState);
counter = counter - 1;
this.currentState = String(counter);
console.log(this.currentState);
}
}
}
displayProgressBarLWC.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>51.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Output:
