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.

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


<div class="outer-div">
    <lightning:spinner aura:id="Spinner" alternativeText="Loading" variant="brand" class="spinner" />
</div>

<lightning:spinner aura:id="Spinner" alternativeText="Loading" variant="brand" class="spinner" />

</div>

Step-1: Set the outer div position.


.THIS .outer-div {
    position: relative;
}

.THIS .outer-div {

position: relative;

}

Step-2: Set the lightning:spinner position.


.THIS .spinner {
    position: absolute;
}

.THIS .spinner {

position: absolute;

}

Example:-

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


public with sharing class SpinnerController {

	@AuraEnabled 
    public static List<Account> fetchRecords( ) {
        
        return [SELECT id, name FROM Account LIMIT 5000];
    }
}

public with sharing class SpinnerController {

@AuraEnabled

public static List<Account> fetchRecords( ) {

return [SELECT id, name FROM Account LIMIT 5000];

}

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


<aura:component controller="SpinnerController">
    <!-- Attribute having account records -->
    <aura:attribute name="recordsData" type="Account[]"  description="account Records Data" />
    
	<div>
    	<div class="slds-grid slds-wrap">
          	<div class="slds-col slds-size_1-of-1 slds-medium-size_4-of-12">
                <!-- Button to fetch account records -->
                <lightning:button variant="brand" label="Fetch Records" title="Fetch Records" onclick="{! c.fetchData }" class="slds-align_absolute-center"/>
          	</div>
          	<div class="slds-col slds-size_1-of-1 slds-medium-size_8-of-12 outerBox" >
                <!-- Lightning Spinner (Should e placed inside the div where spinner should appear) -->
                <lightning:spinner aura:id="Spinner" alternativeText="Loading" size="medium" variant="brand" class="slds-hide spinner" />

                <!-- Displaying fetched records -->
                <aura:iteration var="account" items="{!v.recordsData}" indexVar="index" >
                    <p class="slds-p-horizontal_small">
                        {! (index+1) + ' - ' + account.Name }
                    </p>
                </aura:iteration>
          	</div>
        </div>
    </div>
</aura:component>

<aura:component controller="SpinnerController">

<aura:attribute name="recordsData" type="Account[]" description="account Records Data" />

<div>

<lightning:button variant="brand" label="Fetch Records" title="Fetch Records" onclick="{! c.fetchData }" class="slds-align_absolute-center"/>

</div>

<lightning:spinner aura:id="Spinner" alternativeText="Loading" size="medium" variant="brand" class="slds-hide spinner" />

<aura:iteration var="account" items="{!v.recordsData}" indexVar="index" >

{! (index+1) + ' - ' + account.Name }

</p>

</aura:iteration>

</div>

</aura:component>

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


({
	fetchData : function(component, event, helper) {
        // calling helper method to show spinner
		helper.showSpinner(component);
		
        // fetching records from server
		var action = component.get('c.fetchRecords');
        action.setCallback(this,function(response){
        	if(response.getState() === 'SUCCESS') {
                component.set('v.recordsData',response.getReturnValue());
        	} else if(response.getState() === 'INCOMPLETE') {
                alert('No Server Response or client is offline');
            } else if(response.getState() === 'ERROR') {
            	alert('Error');
            }
            // calling helper method to hide spinner
            helper.hideSpinner(component);
        });
        $A.enqueueAction(action);
	},
})

({

fetchData : function(component, event, helper) {

// calling helper method to show spinner

helper.showSpinner(component);

// fetching records from server

var action = component.get('c.fetchRecords');

action.setCallback(this,function(response){

if(response.getState() === 'SUCCESS') {

component.set('v.recordsData',response.getReturnValue());

} else if(response.getState() === 'INCOMPLETE') {

alert('No Server Response or client is offline');

} else if(response.getState() === 'ERROR') {

alert('Error');

}

// calling helper method to hide spinner

helper.hideSpinner(component);

});

$A.enqueueAction(action);

})

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


({
	showSpinner: function(component) {
		var spinnerMain =  component.find("Spinner");
		$A.util.removeClass(spinnerMain, "slds-hide");
	},

	hideSpinner : function(component) {
		var spinnerMain =  component.find("Spinner");
		$A.util.addClass(spinnerMain, "slds-hide");
	},
})

({

showSpinner: function(component) {

var spinnerMain = component.find("Spinner");

$A.util.removeClass(spinnerMain, "slds-hide");

hideSpinner : function(component) {

var spinnerMain = component.find("Spinner");

$A.util.addClass(spinnerMain, "slds-hide");

})

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


.THIS .outerBox {
	position:relative;
	height:280px;
	border:1px solid #666;
	overflow:auto;
	background-color:#eee
}

.THIS .spinner {
	position:absolute;
}

.THIS .outerBox {

position:relative;

height:280px;

border:1px solid #666;

overflow:auto;

background-color:#eee

}

.THIS .spinner {

position:absolute;

}

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

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

4 Comments

Oldest

Newest

Inline Feedbacks

View all comments

Renan Rocha

5 years ago

Thanks a lot.

cafeforce

Author

Reply to Renan Rocha

Welcome Renan

Holden Parker

3 years ago

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 3 years ago by Holden Parker