Show Spinner on a particular Div/Section

Suyash N
Suyash N 8.5k Views 4 comments

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.


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 🙂

Share This Article
Notify of
Inline Feedbacks
View all comments
Renan Rocha

Thanks a lot.

Holden Parker

This works great but I did run into a problem when using the class name “spinner”. It must be a class used by salesforce or something as when I used it with just position: absolute a gray circular arrow showed up behind my spinner. Updating the name to something like “spinnerClass” worked for me. Good stuff, thanks.

Last edited 2 years ago by Holden Parker