3

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>
2

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

2

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

  • It is not really a good practice to show alternative text. It is meant to be shown only when the resource is not available - this is standard behaviour - not meant to be manually overridden – salesforce-sas Sep 11 at 12:28
  • Yes, it is better to write a custom spinner generally. But alternativeText attribute works not as HTML alt attribute. <lightning:spinner> animation is drawn by ::before and ::after pseudo-elements thus resource-independently. <lightning:spinner> should be updated to enable putting another component into the body. So I think for this moment it is not so bad to consider my workaround solution as possible. – Oleh Berehovskyi Sep 11 at 13:04

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.