Tag Archives: Loader

Salesforce Lightning Spinner

lightning:spinner displays an animated spinner image to indicate that a feature is loading. This component can be used when retrieving data or anytime an operation doesn’t immediately complete.

Here is an example to show the lightning:spinner on click of a button.

Apex Controller:

public class SampleAuraController {
    
    @AuraEnabled
    public static String getMessage() {
        return 'Hello World!!';
    }
}

Lightning Component:

<!--Sample.cmp--> 
<aura:component controller="SampleAuraController" implements="flexipage:availableForAllPageTypes,force:appHostable">
    <!--Component Start-->
    <div class="slds-m-around_xx-large">
        <lightning:button label="Click Me" variant="brand" onclick="{!c.handleClick}"/>
        <lightning:spinner aura:id="mySpinner" alternativeText="Processing.." title="Processing.." variant="brand" size="large" class="slds-hide"/>
    </div>
    <!--Component End-->
</aura:component>

Lightning Component JS Controller:

({
    handleClick: function (component, event, helper) {
        helper.showSpinner(component);
        var action = component.get('c.getMessage');
        action.setCallback(this,function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                helper.hideSpinner(component);
            }
        });
        $A.enqueueAction(action);
    }
})

Lightning Component JS Helper:

({
    showSpinner: function (component, event, helper) {
        var spinner = component.find("mySpinner");
        $A.util.removeClass(spinner, "slds-hide");
    },
    
    hideSpinner: function (component, event, helper) {
        var spinner = component.find("mySpinner");
        $A.util.addClass(spinner, "slds-hide");
    }
})

Output:

We can use lightning:spinner as conditionally, using aura:if or the Lightning Design System utility classes to show or hide the spinner.

The variant attribute changes the appearance of the spinner. If you set variant=”brand”, the spinner matches the Lightning Design System brand color. Setting variant=”inverse” displays a white spinner. The default spinner color is dark blue.

Generic Loading Component For Visualforce Pages

Visualforce Page Component:

<apex:component>
    <apex:actionStatus onstart="startLoading();" onstop="stopLoading();" id="loadStatus" />
    <style>
        .overlay {
            display: none;
            height: 100%;
            left: 0;
            position: fixed;
            top: 0;
            opacity: 0.3;
            -moz-opacity: 0.3;
            width: 100%;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
            filter: alpha(opacity=30);
            background: #000;
            -khtml-opacity: 0.3;
            z-index: 1000;
        }

        .loader {
            background: url('/img/loading32.gif') scroll no-repeat 0 0;
            width: 32px;
            height: 32px;
            position: absolute;
            left: 50%;
        }
    </style>

    <div id="load_scrl" class="loadingBox loader" style="display:none"> </div>
    <div class="loadingBox overlay"> </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">

        function startLoading() {
            $('#load_scrl').css('top', $(document).scrollTop() + 200);
            $('.loadingBox').show();
        }

        function stopLoading() {
            $('.loadingBox').hide();
        }
    </script>
</apex:component>

Now add this component in your Visualforce Page:

<c:LoadingIcon/>

Use the “Status” attribute with the value “loadStatus” on the command button as follows:

<apex:commandButton action="{!save}" value="Save" status="loadStatus" rerender="myForm"/>

Use in Javascript:

startLoading(); //Start Loading
stopLoading() ; //Stop Loading

Salesforce Lightning Loading Spinner

lightning:spinner displays an animated spinner image to indicate that a feature is loading. This component can be used when retrieving data or anytime an operation doesn’t immediately complete.

We can control lightning loading spinner using aura:waiting and aura:donewaiting standard events. Both aura:waiting and aura:doneWaiting are application level events.

aura:waiting: Indicates that the app is waiting for a response to a server request.

aura:donewaiting: Indicates that the app is done waiting for a response to a server request.

Example:

Apex Controller:

public class SampleAuraController {
    
    @AuraEnabled
    public static String getMessage() {
        return 'Hello World!!';
    }
}

Lightning Component:

<!--Sample.cmp--> 
<aura:component controller="SampleAuraController" implements="flexipage:availableForAllPageTypes,force:appHostable">
    
    <!--Declare Handlers-->
    <aura:handler event="aura:waiting" action="{!c.handleShowSpinner}"/>
    <aura:handler event="aura:doneWaiting" action="{!c.handleHideSpinner}"/>
    
    <!--Declare Attributes-->
    <aura:attribute name="showSpinner" type="boolean" default="false"/>
    
    <!--Component Start--> 
    <div class="slds-m-around--xx-large">
         <aura:if isTrue="{!v.showSpinner}">
        <lightning:spinner alternativeText="Loading, Please Wait..." title="Loading, Please Wait..." variant="brand" size="large"/>
             </aura:if>
        <lightning:button label="Click Me" variant="brand" onclick="{!c.handleClick}"/>
    </div>
    <!--Component End-->
</aura:component>

Lightning JS Controller:

({
    //Handle Button click 
    handleClick: function (component, event, helper) {
        var action = component.get('c.getMessage');
        action.setCallback(this,function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var result = response.getReturnValue();
                console.log('result -' + result)
            }
        });
        $A.enqueueAction(action); 
    },
    
    //Call by aura:waiting event  
    handleShowSpinner: function(component, event, helper) {
        component.set("v.showSpinner", true); 
    },
    
    //Call by aura:doneWaiting event 
    handleHideSpinner : function(component,event,helper){
        component.set("v.showSpinner", false);
    }
})

Output: