[SalesForce] How to add some informative text to loading spinner

I have a loading spinner in my lightning component, but I want to add some text for the user to know for example what they are waiting for while its spinning, or just a simple "This might take some time".

Component:

<aura:component implements="force:appHostable" controller="mycontroller" access="global">

    <aura:attribute name="Spinner"  type="boolean"  default="false"/>

    <!--Loading Spinner-->
    <aura:if isTrue="{!v.Spinner}">
        <lightning:spinner alternativeText="Loading" variant="brand" size="large"/>
    </aura:if>
    <!--/Loading Spinner-->

</aura:component>

Best Answer

You cannot get custom message with standard lightning:spinner. However, you can use the base classes from slds spinner

Below is sample:

<aura:attribute name="showSpinner" type="Boolean" default="true" />
<aura:if isTrue="{!v.showSpinner}">
    <div class="demo-only" >
        <div class="slds-spinner_container ">
            <div role="status" class="slds-spinner slds-spinner_medium slds-spinner_brand">
                <span class="slds-assistive-text">Loading</span>
                <div class="slds-spinner__dot-a"></div>
                <div class="slds-spinner__dot-b"></div>
                <div class="custom-loading-text">
                    My Custom Loading Text...
                </div>
            </div>

        </div>
    </div>
</aura:if>

STYLE:

.THIS .custom-loading-text {
    transform: rotate(-90deg);
    position: absolute;
    top: -1.5rem;
    left: -1rem;
    white-space: nowrap;
}

OUTPUT:

enter image description here

Related Topic