How to displays a horizontal dynamic progress bar from left to right when you click a Start/Stop button uses of lightning-progress-bar element in lightning web component — LWC

2 min readJun 26, 2021

Hey guys, today in this post we are going to learn about How to displays a horizontal dynamic progress bar from left to right when you click a Start/Stop button uses of lightning-progress-bar element in lightning web component — LWC.

Here I am creating dynamic horizontal progress bar when you click a Start/Stop button it’s will run dynamically horizontal from left to right.

Files we used in this post example

lwcProgressBarAction.html

LWc HTML File

Template HTML file to create horizontal dynamic progress bar on a click Start/Stop button in lwc

lwcProgressBarAction.js

LWC JavaScript File

It’s hold a javascript on click function to Start/Stop horizontal progress bar dynamically.

lwcProgressBarAction.js-meta.xml

XML Meta File

It is used to where this lightning web component file you want to display.

lwcProgressBarActionApp.app

Lightning Application

It is used, call the LWC HTML file to preview on browser.

Final Output | To know more, Use this link..

Other related post that would you like to learn in LWC Find the below steps:-

Create Lightning Web Component HTML

Step 1:- Create Lightning Web Component HTML ➡ lwcProgressBarAction.html

SFDX:Lightning Web Component ➡ New ➡ lwcProgressBarAction.html

lwcProgressBarAction.html [Lightning Web Component HTML]

Create Lightning Web Component Javascript

Step 2:- Create Lightning Web Component Javascript ➡ lwcProgressBarAction.js

SFDX:Lightning Web Component ➡ New ➡ lwcProgressBarAction.js

lwcProgressBarAction.js [LWC JavaScript File]

Create Lightning Web Component Meta XML

Step 3:- Create Lightning Web Component Meta XML ➡ lwcProgressBarAction.js-meta.xml

SFDX:Lightning Web Component ➡ New >> lwcProgressBarAction.js-meta.xml

lwcProgressBarAction.js-meta.xml [LWC Meta Data XML]

Lightning Web Component Meta XML

Create Lightning Application

Step 4:- Create Lightning Application : lwcProgressBarActionApp.app

From Developer Console >> File >> New >> Lightning Application

lwcProgressBarActionApp.app [Component Application File]

Further post that would you like to learn in LWC

Categories Tags Salesforce LWC, custom progress bar in lightning component, dynamic progress bar in lightning web component, horizontal progress bar in lwc, how to add a progress bar start/stop button in lwc, how to create a progress bar in Salesforce LWC, how to Stop/Start progress bar in lightning web component, lightning progress indicator example, lightning web component progress bar example, lightning-progress indicator lwc example, progress bar lightning component, progress ring lwc, slds-progress bar Tutorial

Originally published at https://www.w3web.net on June 26, 2021.