How to add some informative text to loading spinner?

Unfortunately, all my attempts to place any lightning component inside the spinner body were unsuccessful. Although according to the lightning:spinner specification:

Attribute Name - body, type - component[], access - global. Inherited from aura:component The body of the component. In markup, this is everything in the body of the tag.

You can make your own custom spinner or try some workaround to display text of the value of alternativeText attribute:

<--! spinnerText.cmp -->
<aura:component description="spinnerText">
    <lightning:spinner class="c-spinner" alternativeText="This might take some time" variant="brand" size="large"/>
<aura:component description="spinnerText">

<--! spinnerText.css -->
.THIS.c-spinner .slds-assistive-text {
    clip: unset !important;
    transform: rotate(270deg);
    height: unset !important;
    width: unset !important;
    font-size: x-large;
}

enter image description here


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