Show Spinner on a particular Div/Section

Spinner is useful to show data processing and blocking the UI when an action is performed and is not completed. Showing spinner on a particular div is necessary as we can’t block entire UI all the time when some processing is done on a particular section only.

By blocking the UI user can not interact with any other interface until previous work is completed. Blocking a particular div is useful so that user can interact with the rest of the page easily.

To know how to use lightning:spinner Click Here.

For example, a lookup component.
When you search something in lookup component the only spinner should appear on lookup input not the rest of the page. This is both useful and understandable.

Setting spinner on a particular section/div/ component is very easy. You just have to set some CSS styling for this. You just need to follow two simple steps for this.

spinner on particular div/section

Let’s take this lightning spinner and the outer div in which spinner is enclosed.

Step-1: Set the outer div position.

Step-2: Set the lightning:spinner position.

Example:-

Step-1: Make the apex class to fetch data. [SpinnerController.cls]

 

Step-2: Make the spinner lightning component. [Spinner.cmp]

 

Step-3: Set the JS controller. [SpinnerController.js]

 

Step-4: Set the JS helper. [SpinnerHelper.js]

 

Step-5: Set the CSS of the component. [Spinner.css]

Our code is now ready to use. Use this component in a lightning app.

Comment below if you have any queries or issues…… Cheers 🙂

2
Leave a Reply

avatar
1 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
CaféForceRenan Rocha Recent comment authors
  Subscribe  
newest oldest
Notify of
Renan Rocha
Guest
Renan Rocha

Thanks a lot.