3

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>
  • 1
    you will probably need to set a z-index to the p element where your text is to a greater value for it to diplay on top of the overlay/spinner – glls Nov 26 '18 at 18:53
4

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

0

By adding custom css in <p> tag

<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 style="transform: translate(-32%, -50%) rotate(-90deg);width: 320px;text-align: center;"> please wait while loading </p>
    </div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.