Loading Spinner in Salesforce Lightning by System Events

What is Loading Spinner?

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

What are System Events?

Aura framework fires several system events during its lifecycle. These events are called System events. System events are fired automatically by the Lightning framework such as during component initialization, attribute value change, rendering etc. You can handle these events in your Lightning apps or components and within the Salesforce mobile app. All Components can register for system events in their HTML markup.

Working Demo:

Requirement:

S.No.

File Name

File Type

1

SpinnerController.cls

Apex Class

2

Spinner.cmp

Aura Bundle (component)

3

SpinnerController.js

Aura Bundle (controller)

4

DemoApp.app

Lightning App

Step-1: Create SpinnerConroller.cls

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

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

DemoApp.app

1

<c:Spinner />

Our component is now ready to use.

You don’t have to control the show/hide of spinner here, it will be handled automatically by system events. If you want to show/hide it according to your choice you can use lightning:spinner for that. Check Below.