How to add spinner in Lightning Component Salesforce

by Rijwan Mohmmed
how-to-add-spinner-in-lightning-component-salesforce

Hello friends today we will learn how to show spinner in Lightning Component. We use spinner when we load the data or load the business logic . So it will show user perspective that something is happening in behind the screen.

SpinnerLightningComponent.cmp :

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="showSpinner" type="Boolean" default="false" />
    
    <div class="slds-tabs_card">
        <div class="slds-page-header">
            <div class="slds-page-header__row">
                <div class="slds-page-header__col-title">
                    <div class="slds-media">
                        <div class="slds-media__figure">
                            <span class="slds-icon_container slds-icon-standard-opportunityy">
                                <lightning:icon iconName="action:new_note" alternativeText="New note" title="New note" />
                            </span>
                        </div>
                        <div class="slds-media__body">
                            <div class="slds-page-header__name">
                                <div class="slds-page-header__name-title">
                                    <h1>
                                        <span>Show Spinner in Lightning Component</span>
                                        <span class="slds-page-header__title slds-truncate" title="Recently Viewed">TechDicer</span>
                                    </h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slds-page-header__col-actions">
                    <div class="slds-page-header__controls">
                        <div class="slds-page-header__control">
                            <ul class="slds-button-group-list">
                                <li style="margin-top: 7px;">
                                    <lightning:button label="Toggle" variant="brand" onclick="{!c.handleClick }"/>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> <br/>
    
    <div class="exampleHolder">
        <aura:if isTrue="{!v.showSpinner}">
            <lightning:spinner alternativeText="Loading" />
            <aura:set attribute="else">
                <p>Put loaded content here</p>
            </aura:set>
        </aura:if>
    </div>
</aura:component>

SpinnerLightningComponentController.js :

({
    handleClick: function (cmp, event) {
        cmp.set('v.showSpinner', !cmp.get('v.showSpinner'));
    }
});

SpinnerLightningComponent.css : if you want to show the spinner in particular section not whole screen we use position: relative in css.

.THIS.exampleHolder{
    position: relative;
    display: inline-block;
    margin-left: 15px;
    width: 55px;
    vertical-align: middle;
    white-space: nowrap;
}

SpinnerLightningComponent.css : if you want to show the spinner in whole screen we use below css.

.THIS.exampleHolder{
    display: inline-block;
    margin-left: 15px;
    width: 55px;
    vertical-align: middle;
    white-space: nowrap;
}
What’s your Reaction?
+1
0
+1
0
+1
0
+1
0
+1
0
+1
1

You may also like

1 comment

Micheal November 11, 2021 - 5:24 pm

I’ve been browsing online more than three hours nowadays, but I never
foundany interesting article like yours. It is lovely value enoughfor me.
In my view, if all web owners and bloggers made good contentas you probably did,
the web shall be much more usefulthan ever before.

Reply

Leave a Comment