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
    Commented Mar 26, 2017 at 18:45
  • Yes, but I want to add shade background to all my items. Commented Mar 26, 2017 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
    Commented Mar 27, 2017 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'). Commented Mar 27, 2017 at 7:25

1 Answer 1


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. Commented Mar 27, 2017 at 7:28
  • @EugeneVabishchevich Try to adjust CSS for background.
    – Tariq
    Commented Mar 27, 2017 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); Commented Sep 3, 2018 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
    Commented Sep 4, 2018 at 7:29

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .