lightning:progressIndicator - How can I show all the steps as completed (with tick mark) as shown in the attachment

Question

lightning:progressIndicator - How can I show all the steps as completed (with tick mark) as shown in the attachment.

Answer 1

According to lightning:progessIndicator,

You have to make currentstep value as the last value present in the lightning:progressStep

So in your image, you have 3 steps, you have to make currentStep as '3'

<lightning:progressIndicator currentStep="3" type="base" hasError="false" variant="base">
        <lightning:progressStep label="Step 1" value="1"/>
        <lightning:progressStep label="Step 2" value="2"/>
        <lightning:progressStep label="Step 3" value="3"/>

    </lightning:progressIndicator>

Answer 2

THIS is how to do it correctly.... Spent an hour trying to figure it out...

    <lightning:progressIndicator  currentStep="AllDone" type="base" hasError="false" variant="base" >
            <lightning:progressStep label="Step1" value="Step1"/>
            <lightning:progressStep label="Step2" value="Step2" />
            <lightning:progressStep label="All Done" value="AllDone" class="slds-hide" />
        </lightning:progressIndicator>

Answer 3

Try this. I built on top of Elastep's idea. It didn't work with just class="slds-hide", I had to add <template if:true={allDone}> around it. I also assumed there is some trigger that completes the "path" which in my case is the Complete button.

ProgressIndicatorBasic.html

<template>
    <lightning-card title="Progress Indicator">
        <lightning-button label="Complete" slot="actions" onclick={handleCompleteProgressBar}></lightning-button>
        <p class="slds-p-vertical_large">
            
            <lightning-progress-indicator current-step={currentStep} type={type} has-error={hasError} variant={variant}>
                <template for:each={steps} for:item="step">
                    <lightning-progress-step label={step.label} value={step.value} key={step.label} onclick={handleActivateStep}></lightning-progress-step>
                </template>
                <template if:true={allDone}>
                    <lightning-progress-step label="All Done" value="alldone" class="slds-hide"></lightning-progress-step>
                </template>
            </lightning-progress-indicator> 

        </p>  
    </lightning-card>      
</template>

ProgressIndicatorBasic.js

import { LightningElement} from 'lwc';

const STEPS = [
    {"label":"Step 1","value":"1"},
    {"label":"Step 2","value":"2"},
    {"label":"Step 3","value":"3"}
];

export default class ProgressIndicatorBasic extends LightningElement {
    
    // Default values
    activeStep = 1;
    type = 'base';
    variant = 'base';
    hasError = false;
    allDone = false;

    get steps() {
        return STEPS;
    }

    get currentStep() {
        return this.activeStep.toString();
    }

    handleActivateStep(event) {
        if(this.currentStep == 'alldone') {
            this.allDone = false; // reset allDone and hide it
        }
        this.activeStep = (event.target.value != '' && event.target.value != null && typeof event.target.value != 'undefined') ? event.target.value : this.activeStep;
    }

    handleCompleteProgressBar() {
        this.activeStep = 'alldone';
        this.allDone = true;
    }
}

Answer 4

Play With trick.

HTML

<template>
   <lightning:progressIndicator  currentStep="Step1" type="base" hasError="false" variant="base" >
      <lightning:progressStep label="Step1" value="Step1"/>
      <lightning:progressStep label="Step2" value="Step2" />
      <lightning:progressStep label="AllDone" value="AllDone"/>
      <!--Add Extra Step and Hide it-->                   
      <template if:true={pseudostep}>
         <lightning:progressStep label="Pseudo" value="Pseudo" 
            class="slds-hide"/>
      </template>
   </lightning:progressIndicator>
   <lightning-button label="Complete" slot="actions" onclick={handleCompleteProgressBar}></lightning-button>
   <p class="slds-p-vertical_large">
</template>

JS

import { LightningElement } from 'lwc';

export default class ProgressIndicatorBasic extends LightningElement {
  @track pseudostep=false;

  handleCompleteProgressBar() {
    this.pseudostep=true;
    this.currentStep = 'Pseudo';//Set Pseudo Stage
}
}