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.

Lightning Component:

    <div class="slds-m-around_xx-large">
        <lightning:button label="Click Me" variant="brand" onclick="{!c.openSpinner}"/>
            <lightning:spinner class="slds-hide" alternativeText="Processing.." title="Processing.." aura:id="spnr" variant="brand" size="large" />

Lightning Component JS Controller:

    openSpinner: function (cmp, event) {
        var spinner = cmp.find("spnr");
        $A.util.toggleClass(spinner, "slds-show");

Lightning Test App:

<aura:application extends="force:slds">
    <c:Spinner />


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:actionStatus onstart="startLoading();" onstop="stopLoading();" id="loadStatus" />
        .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%;

    <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);

        function stopLoading() {

Now add this component in your Visualforce Page:


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