Lightning-progress-indicator in lwc

 A lightning-progress-indicator component displays steps horizontally. It indicates the number of steps in a given process, the current step, as well as prior steps which is completed.

Steps are created using lightning-progress-step component along with label and value attributes. The current step is specified using the current-step attribute, The current step must match one of the value attributes on a lightning-progress-step component as shown below.

• Set type="base" to create a component that implements the progress indicator blueprint in the Lightning Design System. 

          A progress indicator component communicates to the user the progress of a particular process.

     

• Set type="path" to create a component that implements the path blueprint in the Lightning Design System. 

          The Path communicates to the user the progress of a particular process.

• If the type is not specified, the default type base is used. 

lightningprogressindicator.html

<template>

    <p>

        A progress indicator displays the steps in a process. All steps preceding the step specified by currentStep are marked completed.

    </p>

    <lightning-progress-indicator current-step="3" type="base" has-error="true" 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-step label="Step 4" value="4"></lightning-progress-step>

    </lightning-progress-indicator>

</template>

lightningprogressindicator.js

import { LightningElement } from 'lwc';

export default class lightningprogressindicator extends LightningElement {}