Progress indicator in LWC

The progress indicator in LWC is used to indicate the processing steps of our page or task. LWC provides the component for progress indication.

 <lightning-progress-indicator> </lightning-progress-indicator>

For example, we are supposed to save the card details from LWC. but the process should pass the various stages, like getting data and validating it, and then save the data into the temporary object.

There are many progress indicator options available in LWC.

There are,

• Progress-bar
• Progress-ring
• Progress-indicator
• Progress-step

Use the below code to achieve the task and progress.

progressIndicator.html

<template>

       <lightning-card title=’Save your card’>

         <lightning-progress-indicator current-step={currentStep} 

          type=”base”  variant=”base”>

  <lightning-progress-step label=”Step 1″ 

                    value=”1″></lightning-progress-step>

      <lightning-progress-step label=”Step 2″ 

                    value=”2″></lightning-progress-step>

            <lightning-progress-step label=”Step 3″  

                          value=”3″></lightning-progress-step>

  </lightning-progress-indicator>

           <div style=’width:10cm;height:12.5cm;

          margin-left:8cm;margin-top:2cm;’>

           <template lwc:if={cardForm}>

               <div style=’margin-left:0.9cm;’>

                  <lightning-input label=’Email’ type=’email’ 

                         style=’width:8.3cm’></lightning-input>

                  <lightning-input label=’Card informations’ 

                    pattern=’/^([0-9]{4}( |\-)){3}[0-4]{4}$/’

                    data-field=”cardNumber” style=’width:8.3cm;’ 

                    maxlength=’16’ placeholder=’1234 1234 1234 1234′>

                  </lightning-input>

                  <lightning-layout>

                  <lightning-input placeholder=’MM/YY’ 

                     style=’width:4cm;’></lightning-input>

                  <lightning-input placeholder=’CVC’ 

                  style=’width:4cm;margin-left:0.3cm’></lightning-input>

                  </lightning-layout>

                  <lightning-input type=’text’ label=’Name on card’ 

                   style=’width:8.3cm;’></lightning-input>

                  <lightning-combobox style=’width:8.3cm;’ name=”country” 

                       label=”Country or region” 

                       placeholder=”Select Country” 

                       options={options}></lightning-combobox><br>

                  <div style=’margin-left:3cm;’>

            <lightning-button label=’Proceed’ 

                     variant=’brand’  onclick={proceed}>

            </lightning-button>

            </div>

            </div>

          </template>

                <template lwc:elseif={isValidate}>

           <div style=’text-align:center’>

                        card No: {cardNumber}<br><br>

                   <lightning-button variant=”brand” label=”validate” 

                   title=”titleName” onclick={validateCard}>

                   </lightning-button>

                  </div>

                </template>

               <template lwc:elseif={isSave}>

                   <div style=’text-align:center’>

                        status: {confirmationText}<br><br>

                        <lightning-button variant=”brand” label=”Save” 

                           title=”titleName” onclick={SaveCard}>

                       </lightning-button>

                    </div>

               </template>

            </div>

      </lightning-card>

   </template>

progressIndicator.js

    import { LightningElement } from ‘lwc’;

    export default class ProgressIndicator extends LightningElement {

    cardNumber;

    cardForm=true;

    isValidate=false;

    isSave=false

    confirmationText;

    currentStep=”1″;

    options=[{label:’Us’,value:’Us’},{label:’India’,value:’India’}]

    proceed(){

        this.cardNumber=this.template.

           querySelector(‘[data-field=”cardNumber”]’).value

  this.isValidate=true;

        this.cardForm=false;

        this.currentStep=”2″;

    }

    validateCard(){

        if(this.cardNumber){

             this.isValidate=false;

            this.isSave=true;

            this.currentStep=”3″;

        }

    }

    SaveCard(){

        this.isValidate=false;

        this.confirmationText=’card Saved’;

    }

  }

Output: