Custom Lightning Progress Bar In LWC

Telegram logo Join our Telegram Channel
LWC Custom Progress Bar

Hello, Trailblazers! In this post I will share the custom lightning progress bar component that I have created. This is a fully-featured and configured component that you can use in your Salesforce Projects as a plug-n-play component.


  • Uses standard SLDS stylings.
  • Supports border circular border-radius.
  • Add a description, and show/hide description section.
  • Supports standard salesforce variant colors like default (blue), success, error, warning, and info.
  • Add custom colors to override the default variant colors, you can also pass on the SLDS design color tokens here.
  • Available in four different sizes like x-small, small, medium, large.
  • Can be easily customized with custom code.
  • Playground to try it live and to generate the code based on configurations.


Code and Steps to use

  1. Download the file
  2. Extract the files
  3. Deploy the code to your org.
  4. Generate the sample code from the below configurator/playground link.
  5. Now you are ready to use the code.
No comments :
Post a Comment

Hi there, comments on this site are moderated, you might need to wait until your comment is published. Spam and promotions will be deleted. Sorry for the inconvenience but we have moderated the comments for the safety of this website users. If you have any concern, or if you are not able to comment for some reason, email us at