[SalesForce] Add spinner text along with spinner in lightning component

I am trying to add spinner text like 'Please wait while loading' along with dotted spinner. But the text is not displaying . It is displaying just a spinner. Can you identify what i am missing ?

<aura:if isTrue="{!v.Spinner}">
    <div aura:id="spinnerId" class="slds-spinner_container">
        <div class="slds-spinner--brand  slds-spinner slds-spinner--large slds-is-relative" role="alert">
            <span class="slds-assistive-text">Loading</span>
            <div class="slds-spinner__dot-a"></div>
            <div class="slds-spinner__dot-b"></div>

            <p> please wait while loading </p>
        </div>
    </div>
</aura:if>

Best Answer

There is a spinner component already in lightning. You can use this then with a little css add your text in the style.

Component

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

CSS

.THIS .spins::after {
    position: absolute;
    content: 'Please wait while loading';
    width: 100%;
    text-align: center;
    top: calc(50% + 3em);
    font-weight: bold;
}

The top value is based on the fact i'm using the large size spinner, this can be tweaked if using another size. And it will give you something like: enter image description here

Related Topic