I added lightning component to the page layout but when I fire spinner it displays for all components:

spinner issue Also I have two components with aura:id to use component.find() in doInit function. That is the reason why I can't create container div (.find() doesn't work in this case). What is the best way to display spinner in my component only?

  • 3
    Have you tried simply placing the spinner in a relative positioned element? You can use the slds-is-relative class to achieve this. If the spinner's parent has relative positioning the shade will be confined to that element. – dsharrison Mar 26 '17 at 18:45
  • Yes, but I want to add shade background to all my items. – Eugene Vabishchevich Mar 26 '17 at 20:27
  • 1
    I am totally confused about what you are looking for then. Could you maybe provide a quick mock-up of what you expect your component to look like? – dsharrison Mar 27 '17 at 2:28
  • Sure. Btw you can check my original screenshot. I want to show spinner+background inside my component only. Also I have two divs for two components that I can show/hide using specific CSS class. I tried to create container div and add relative css class but in this way I can't get id using component.find('my_aura_id'). – Eugene Vabishchevich Mar 27 '17 at 7:25

Try to do it with some CSS changes and change use unique aura:id for both Do something like this ..


<aura:attribute name="isLoading" type="Boolean" default="true" />
<aura:if isTrue="{!v.isLoading}">
   <div class="slds-p-horizontal--small slds-size--1-of-1">
      <div class="slds-p-horizontal--small slds-size--1-of-1 isActivityLoading">
        <lightning:spinner variant="brand" size="small"/>
   <aura:set attribute="else">
      //Else show other data     


.THIS .isActivityLoading .slds-spinner_container {
   position: relative !important;
   top: 20px !important;


doInit : function(component, event, helper) {
    //Getting Data
    var action = component.get("c.yourAction");
        if (response.getState() === "SUCCESS"){
           component.set("{!v.isLoading}", false);

  • Hi Tariq! In this case you want to hide all data from the layout and display spinner. I want to display spinner+background as the layer above my layout. – Eugene Vabishchevich Mar 27 '17 at 7:28
  • @EugeneVabishchevich Try to adjust CSS for background. – Tariq Mar 27 '17 at 8:00
  • @Tariq I'm not sure this component.set("{!v.isLoading}", false); will work.. You probably need to change it to component.set("v.isLoading", false); – Yonathan Goriachnick Sep 3 '18 at 14:40
  • @YonatanGoriachnick In March 2017 it was working for me. I don't know it work or not for now. as i am moving salesforce to blockchain :D – Tariq Sep 4 '18 at 7:29

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.