How To Show Multiple Screens With Progress Indicator Bar on Modal Box in Lightning Component

Lightning Component

Hi friends, today we are going to create a sample salesforce lightning component for showing multiple screens with progress indicator bar inside a modal popup box.

with the winter 18 release we have ‘lightning:progressIndicator‘ out of the box component, which is Provides a visual indication on the progress of a particular process. this have came with 2 type of pattern, one is ‘base’ and other one is ‘path’ :

these progress indicator have useful when we are working with the multiple screens / steps scenario.

Now let’s start with our sample lightning component example, where we will manage multiple screens inside a custom modal popup box with progress indicators.

Output :

progress indicator


Step 1 : Create Lightning Component : modalWithProgress.cmp

From Developer Console >> File >> New >> Lightning Compoenent

  • See Code Comments.

See Also : Create Modal/Popup Box In Lightning Component – Salesforce

Client Side JavaScript Controller : modalWithProgressController.js

  • See code comments.
From developer console >> file >> new >> Lightning Application
Step 1 : [Lightning Application]

Output :

progress indicator


To create ‘path’ style progress indicator you have need to add type=”path” attribute in your ‘lightning:progressIndicator‘ tag in lightning component.

progress indicator


Related Resource:

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can share your thoughts  in comment box.

Happy Learning 🙂


Leave a Reply