Loading Spinner in Lightning using lightning:spinner

Suyash N
Suyash N 3.6k Views Add a Comment

What is Spinner?

You can show the progress of a task in salesforce lightning or visualforce through loading spinner. Spinners in lightning are easy to use and customize.

You can also use it for a child component or a particular div or section only.

What is lightning:spinner?

It is a lightning component used to show the spinner. You can also customize its size and variant and you can also add your custom style class to it.

Working Demo:

lightning spinner


Step-1: Create SpinnerConroller.cls

Here we are just creating a basic Apex class to fetch records from Account object and returning them.

Step-2: Open Spinner.cmp and paste below code.

Step-3: Open SpinnerController.js and paste the below code.

Step-4: Open SpinnerHelper.js and paste the below code.

Step-5: Open DemoApp.app and call the component

Our component is now ready to use.

You can manually control the show/hide of spinner here, it will not be handled automatically. If you want it to automatic show or hide on some processing, you can use system events for this. Check Below post.

Loader in Salesforce Lightning by System Events

Share This Article
Leave a comment
Notify of
Inline Feedbacks
View all comments