I have Lightning components and I cannot use <lightning:spinner>, because it overlays on the whole page and I would like to display spinner in certain place.

That's why I have written following in my component's CSS:

.THIS .picklist-spinner-img {
    background-image: url("/resource/LightningDesignSystem/assets/images/spinners/slds_spinner_brand.gif");

The problem is this is the only place I need to use SLDS static resource. Everywhere else in the system I use either force:slds or apex:slds to include the freshest version of the SLDS. Any ideas how to get rid of static resource but keep my spinner image in place?


Probably you are looking for ui:spinner (https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_ui_spinner.htm), it does not overlay entire page. As for referencing slds you can download it from (https://www.lightningdesignsystem.com/downloads/) and reference as a static resource.

Update: Sorry for misunderstanding. Do you need exactly brand spinner? Here you can get regular one: '/auraFW/resources/aura/images/spinner.gif'. And if it suites you, you can also use following approach:

<aura:application  extends="force:slds">    

  <div role="status" class="slds-spinner slds-spinner_medium">
    <span class="slds-assistive-text">Loading</span>
    <div class="slds-spinner__dot-a"></div>
    <div class="slds-spinner__dot-b"></div>

  • Usage of ui: components in Lightning is deprecated if you want to keep LEX Style and ui:spinner looks totally off. I know I can use SLDS and use it in CSS, in fact as you can see in my CSS I am doing that. Sorry, but that does not answer my question.
    – Wookie88
    Jul 14 '17 at 9:55
  • Seems fine solution, but is it documented somewhere that you can use /auraFW/resources? If it's undocumented it may be risky to put it on prod as it can be changed by SF anytime in the future.
    – Wookie88
    Jul 17 '17 at 10:19
  • It is mentioned on a list of reserved SF URL developer.salesforce.com/docs/atlas.en-us.208.0.apexcode.meta/… . Is there any restriction on using div solution (second option in my answer) on your side?
    – Roman
    Jul 17 '17 at 10:51
  • It's less clean. OK, that link you gave convinces me ;)
    – Wookie88
    Jul 17 '17 at 11:15

You can use Lightning:Spinner Component for your component. https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_spinner.htm

By default lighning:spinner will be on full page because css for this is

.slds-scope .slds-spinner_container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9050;
    background-color: rgba(255, 255, 255, 0.75);
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity .2s ease,visibility 0s;
    transition: opacity .2s ease,visibility 0s;
    -webkit-transition-delay: 0s,.3s;
    transition-delay: 0s,.3s;

Position given is absolute and top right bottom left 0 will make it appear on full page.

So to make it cover only specific part you have to wrap it in a div which has position relative.

<div style="position:relative">
<lightning:spinner variant="brand" size="large"/>
  • Hmm the problem with your solution is that when I try to get the spinner inside the box (it is used for showing spinner when picklist values are still loading) the spinner is going outside, see here: imgur.com/a/OdVe8
    – Wookie88
    Jul 17 '17 at 10:46
  • are you using size as small? Jul 17 '17 at 10:54
  • Yes, on both small and large it goes out of bounding box.
    – Wookie88
    Jul 17 '17 at 11:14
  • @wookie in class "slds-spinner--small" or "slds-spinner_small" there will be a width=1.25rem you can decrease it and check whether it goes out or not Jul 17 '17 at 11:31

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.