Lightning Progress Indicator in LWC

Hello friends, today we are going to discuss Lightning Progress Indicator in LWC. Lightning Progress Indicator is a powerful component in the Lightning Web Components (LWC) framework that provides a visual representation of the progress of a task.

Also, check this: Embed VF page in LWC & two-way Communication

Key Highlights :

1. Can be used to indicate the progress of a multi-step process, such as a form submission, or to indicate the progress of a long-running operation, such as a data import.
2. A lightning-progress-indicator the component displays a horizontal list of steps in a process, indicating the number of steps in a given process.
3. Set type="path" to create a component that implements the path blueprint in the Lightning Design System. 
4. Set type="base" to create a component that implements the progress indicator blueprint in the Lightning Design System.

Process & Code :

AccountDataController.cls:

public class AccountDataController {
    @AuraEnabled(Cacheable = true)
    public static List<Account> getAccounts(){
      return [SELECT Id, Name,Industry, Type, Phone, Rating, AccountNumber FROM Account ORDER BY Name LIMIT 10];
    }
}

progressIndicatorLWC.HTML:

<template>
	<div class="slds-card slds-m-horizontal_large">
		<!-- Spinner -->
		<div class="slds-is-relative slds-m-around_large slds-align_absolute-center"
			style="min-height: 300px; !important;" if:true={showSpinner}>
			<lightning-spinner alternative-text="Loading..." variant="brand"></lightning-spinner>
		</div>
		<!-- /Spinner -->

		<template if:false={showSpinner}>
			<!-- Header -->
			<div class="slds-card__header slds-p-bottom_small">
				<header>
					<lightning-progress-indicator current-step={currentStep} type="base" variant="base">
						<lightning-progress-step label="First Page" value="1" onclick={nextPage}>
						</lightning-progress-step>
						<lightning-progress-step label="Second Page" value="2" onclick={nextPage}>
						</lightning-progress-step>
						<lightning-progress-step label="Third Page" value="3" onclick={nextPage}>
						</lightning-progress-step>
					</lightning-progress-indicator>
				</header>
			</div>
			<!-- /Header -->

			<!-- First Page -->
			<template if:true={showFirstPage}>
				<div class="slds-p-around_large" style="height: 300px; !important;font-size:15px">
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
						the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
						of type and scrambled it to make a type specimen book. It has survived not only five centuries,
						but also the leap into electronic typesetting, remaining essentially unchanged. It was
						popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
						and more recently with desktop publishing software like Aldus PageMaker including versions of
						Lorem Ipsum.
					</p><br/>
					<p>It is a long established fact that a reader will be distracted by the readable content of a page
						when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
						distribution of letters, as opposed to using 'Content here, content here', making it look like
						readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
						their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
						their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
						purpose (injected humour and the like).</p>
				</div>
			</template>
			<!-- /First Page -->

			<!-- Second Page -->
			<template if:true={showSecondPage}>
				<div class="slds-p-around_large" style="height: 300px; !important;">
					<lightning-datatable key-field="Id" data={listOfAccounts} columns={columns}
						show-row-number-column="true">
					</lightning-datatable>
				</div>
			</template>
			<!-- /Second Page -->

			<!-- Third Page -->
			<template if:true={showThirdPage}>
				<div class="slds-p-around_large" style="height: 300px; !important;">
					<lightning-record-form record-id={recordId} object-api-name="Account" fields={fields} columns="2"
						mode="edit" onsubmit={handleSubmit}>
					</lightning-record-form>
				</div>
			</template>
			<!-- /Third Page -->

			<!-- Footer -->
			<footer class="slds-modal__footer slds-text-align_right" style="padding: 0.50rem 1rem;">
				<lightning-button class="slds-p-right_xx-small" label="Back" variant="neutral" onclick={previousPage}>
				</lightning-button>
				<lightning-button label="Next" variant="brand" onclick={nextPage}></lightning-button>
			</footer>
		</template>
	</div>
</template>

progressIndicatorLWC.JS:

import { LightningElement } from 'lwc';
import getAccounts from '@salesforce/apex/AccountDataController.getAccounts';

const columns = [{ label: 'Name', fieldName: 'Name', type: 'text'},
{ label: 'Phone', fieldName: 'Phone', type: 'text'},
{ label: 'Website', fieldName: 'Website', type: 'text'},
{ label: 'Industry', fieldName: 'Industry', type: 'text'}]

export default class ProgressIndicatorLWC extends LightningElement {
    step = 1;
    currentStep = "1";
    showSpinner;
    showFirstPage = true;
    showSecondPage = false;
    showThirdPage = false;
    fields = ['Name', 'Type', 'Phone', 'AccountNumber', 'Industry', 'Website'];
    listOfAccounts;
    columns = columns;

    getInitData() {
        this.showSpinner = true;
        getAccounts({})
            .then(data => {
                this.listOfAccounts = data;
                this.showSpinner = false;
            })
            .catch(error => {
                console.log(error);
            });
    }

    nextPage(event) {
        if (this.step != 3) {
            this.step++;
        }

        this.handleSetUpSteps();
    }

    previousPage(event) {
        if (this.step != 1) {
            this.step--;
        }

        this.handleSetUpSteps();
    }

    handleSetUpSteps() {
        this.showFirstPage = this.step == 1;
        this.showSecondPage = this.step == 2;
        this.showThirdPage = this.step == 3;
        this.currentStep = "" + this.step;

        if (this.step === 2) {
            this.showSpinner = true;
            this.getInitData();
        }
    }
}

progressIndicatorLWC.JS-xml:

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>57.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__HomePage</target>
	</targets>
</LightningComponentBundle>

Output :

Reference :

1. Progress Indicator