How to show progress bar in lwc component - Salesforce Globe For You

 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: