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;
}
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: