Create a Form with a Progress Bar in Salesforce Lightning Web Component (LWC)

A Progress Bar Component must include both opening and closing tags, as shown below.

<lightning-progress-bar value={progress}> 
</lightning-progress-bar>

A Lightning Web Component can be used to build custom pages for Lightning Experience and the Salesforce mobile app quickly with point and click tools. Make sure to add the right target for it.

To create the progress bar form, copy and paste the code below into the Lightning Web Component file.

Step 1: progressBarExample.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Step 2: progressBarExample.html

<!-- ProgressBarExample.html -->
<template>
    <form>
        <div
            class="slds-p-top_small slds-p-bottom_medium slds-align_absolute-center slds-theme_default slds-text-heading_medium">
            <b>Progress Bar Example</b>
        </div>
        <div class="slds-box slds-theme_default">
            <div style="margin-left: 2%;">
                <div>
                    <div class="slds-grid slds-grid_align-spread slds-p-bottom_x-small">
                        <span>Track Progress</span>
                        <span aria-hidden="true">
                            <strong>{progress}% Complete</strong>
                        </span>
                    </div>
                </div>
            <lightning-progress-bar 
                size="medium" 
                value={progress} 
                variant="circular">
            </lightning-progress-bar>
            </div>
            <lightning-input 
                name="firstName" 
                label="First Name" 
                value={firstName} 
                onchange={handleChange}>
            </lightning-input>
            <lightning-input 
                name="lastName" 
                label="Last Name" 
                value={lastName} 
                onchange={handleChange}>
            </lightning-input>
            <lightning-input 
                type="date" 
                name="birthdate" 
                label="Birthdate" 
                value={birthdate} 
                onchange={handleChange}>
            </lightning-input>
            <lightning-input 
                type="email" 
                name="emailAddress" 
                label="Email Address" 
                value={emailAddress}
                onchange={handleChange}>
            </lightning-input>
            <lightning-input 
                type="tel" 
                name="mobile" 
                label="Mobile" 
                value={mobile} 
                onchange={handleChange}>
            </lightning-input>
        <div class="slds-m-top_small slds-align_absolute-center">
            <lightning-button 
                 variant="Neutral" 
                 label="Reset" 
                 class="slds-m-left_x-small" 
                 onclick={handleReset}>
            </lightning-button>
            <lightning-button 
                 variant="brand" 
                 class="slds-m-left_x-small" 
                 label="Submit" 
                 onclick={handleSubmit}>
            </lightning-button>
        </div>
        </div>
    </form>
</template>

Step 3: progressBarExample.js

//ProgressBarExample.js
import { LightningElement } from 'lwc';

export default class InputExample extends LightningElement {

    progress = 0;
    emailAddress = '';
    mobile = '';
    birthdate = '';
    firstName = '';
    lastName = '';

    handleChange(event) {
    const field = event.target.name;
        if (field === 'firstName') {
            this.firstName = event.target.value;
        } 
        else if (field === 'lastName') {
            this.lastName = event.target.value;
        }
        else if (field === 'mobile') {
            this.mobile = event.target.value;
        }
        else if (field === 'emailAddress') {
            this.emailAddress = event.target.value;
        }
        else if (field === 'birthdate') {
            this.birthdate = event.target.value;
        }
        this.fieldsCompleted();
    }

    fieldsCompleted() {
        var numVal = 0;

        if (this.firstName != null && this.firstName != '') {
            numVal = numVal + 1;
        }

        if (this.lastName != null && this.lastName != '') {
            numVal = numVal + 1;
        }

        if (this.birthdate != null && this.birthdate != '') {
            numVal = numVal + 1;
        }

        if (this.emailAddress != null && this.emailAddress !='') {
            numVal = numVal + 1;
        }
        
        if (this.mobile != null && this.mobile !='') {
            numVal = numVal + 1;
        }

        this.progressBar(numVal);
    }

    progressBar(numVal) {
        if (numVal >= 1) {
            this.progress = numVal * 20;
        }
        else {
            this.progress = 0;
        }
    }

    handleSubmit() {
    }

    handleReset() {
        this.progress = 0;
        this.emailAddress = '';
        this.mobile = '';
        this.birthdate = '';
        this.firstName = '';
        this.lastName = '';
    }
}

_________________________________________

Written By: Rakesh Gupta | Salesforce MVP
Rakesh is Senior Solution Architect, Salesforce MVP, and Author. With a background in computer science, Rakesh is passionate about solution design and process automation.

Submissions reflect only the opinions of the user who made available the Submission and not the opinions of Salesforce, regardless of whether the user is affiliated with Salesforce, and may contain or constitute products, services, information, data, content and other materials made available by or on behalf of third parties ("Third Party Materials).  Salesforce neither controls nor endorses, nor is Salesforce responsible for, any Third  Party Materials, including their accuracy, validity, timeliness, completeness, reliability, integrity, quality, legality,  usefulness or safety, or any applicable intellectual property rights. Any Submissions made available through any message board or forum in response to posted questions, or that otherwise purports to answer any questions, including any questions about Salesforce or Programs, are made available for your general knowledge only and should never be relied upon as answers to your specific questions (even if an answer is marked as a “best” answer or with any similar qualifications). You should always contact Salesforce support for answers to your specific questions. Salesforce has no control over Submissions, and is not responsible for any use or misuse (including any distribution) by any third party of Submissions.

If you have questions, tap into the wisdom of our entire Trailblazer Community here: https://trailhead.salesforce.com/trailblazer-community/feed