Access SLDS resource in Lightning component's CSS

Question

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?

Answer 1

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>
  </div>

</aura:application>

Answer 2

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"/>
</div>