Component Blueprints

Spinners

Spinners are CSS loading indicators that should be shown when retrieving data or performing slow computations. In some cases, the first time a parent component loads, a stencil is preferred to indicate network activity.
Loading

About Spinners#

To use the spinner in a component, the parent of the spinner should be set to position:relative. You can use the utility class .slds-is-relative or add the declaration to your custom component CSS. If you are using the spinner in an iframe and dynamically loading DOM nodes after the page has loaded, it is recommended that you set the .slds-spinner_container to position:fixed so that it remains centered in the viewport. The background overlay for the spinner is an optional element.

Accessibility#

A spinner should have the Aria role="status" and contain assistive text that explains what is currently happening.

Base#

Loading
<div class="demo-only demo-only demo-only_viewport" style="height:6rem">
  <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>
</div>

Examples#

Without container#

Loading
<div class="demo-only demo--inverse" style="height:6rem">
  <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>
</div>

With container#

Loading
<div class="demo-only demo--inverse" style="height:6rem">
  <div class="slds-spinner_container">
    <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>
  </div>
</div>

Fixed container#

Loading
<div class="demo-only demo-only demo-only_viewport demo--inverse" style="height:6rem">
  <div class="slds-spinner_container slds-is-fixed">
    <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>
  </div>
</div>

Right to left support#

Loading
<div class="demo-only" style="height:6rem" dir="rtl">
  <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>
</div>

Layout#

Inlined#

Loading
<div class="slds-align_absolute-center" style="height:4rem">
  <div role="status" class="slds-spinner slds-spinner_medium slds-spinner_inline">
    <span class="slds-assistive-text">Loading</span>
    <div class="slds-spinner__dot-a"></div>
    <div class="slds-spinner__dot-b"></div>
  </div>
</div>

Color#

Inverse#

Loading
<div class="demo-only" style="background-color:#16325c;height:6rem">
  <div class="slds-spinner_container">
    <div role="status" class="slds-spinner slds-spinner_medium slds-spinner_inverse">
      <span class="slds-assistive-text">Loading</span>
      <div class="slds-spinner__dot-a"></div>
      <div class="slds-spinner__dot-b"></div>
    </div>
  </div>
</div>

Brand#

Loading
<div class="demo-only" style="height:6rem">
  <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>
  </div>
</div>

Timing#

Delayed#

Loading
<div class="demo-only" style="height:6rem">
  <div class="slds-spinner_container">
    <div role="status" class="slds-spinner slds-spinner_medium slds-spinner_delayed">
      <span class="slds-assistive-text">Loading</span>
      <div class="slds-spinner__dot-a"></div>
      <div class="slds-spinner__dot-b"></div>
    </div>
  </div>
</div>

Sizing#

Xx-Small#

Loading
<div class="demo-only" style="height:6rem">
  <div class="slds-spinner_container">
    <div role="status" class="slds-spinner slds-spinner_xx-small">
      <span class="slds-assistive-text">Loading</span>
      <div class="slds-spinner__dot-a"></div>
      <div class="slds-spinner__dot-b"></div>
    </div>
  </div>
</div>

X-Small#

Loading
<div class="demo-only" style="height:6rem">
  <div class="slds-spinner_container">
    <div role="status" class="slds-spinner slds-spinner_x-small">
      <span class="slds-assistive-text">Loading</span>
      <div class="slds-spinner__dot-a"></div>
      <div class="slds-spinner__dot-b"></div>
    </div>
  </div>
</div>

Small#

Loading
<div class="demo-only" style="height:6rem">
  <div class="slds-spinner_container">
    <div role="status" class="slds-spinner slds-spinner_small">
      <span class="slds-assistive-text">Loading</span>
      <div class="slds-spinner__dot-a"></div>
      <div class="slds-spinner__dot-b"></div>
    </div>
  </div>
</div>

Medium#

Loading
<div class="demo-only" style="height:6rem">
  <div class="slds-spinner_container">
    <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>
  </div>
</div>

Large#

Loading
<div class="demo-only" style="height:6rem">
  <div class="slds-spinner_container">
    <div role="status" class="slds-spinner slds-spinner_large">
      <span class="slds-assistive-text">Loading</span>
      <div class="slds-spinner__dot-a"></div>
      <div class="slds-spinner__dot-b"></div>
    </div>
  </div>
</div>

Overview of CSS Classes

Selector.slds-spinner
Summary
Supportdev-ready
Restrictdiv
VariantTrue
Selector.slds-spinner_inline
Summary

Returns the spinner back into the document flow

Restrict.slds-spinner
ModifierTrue
Selector.slds-spinner__dot-a
Summary

This creates two of the circles

Restrict.slds-spinner div
Selector.slds-spinner__dot-b
Summary

This creates two of the circles

Restrict.slds-spinner div
Selector.slds-spinner_delayed
Summary

Set a delay of 300ms on spinner

Restrict.slds-spinner
ModifierTrue
Selector.slds-spinner_brand
Summary

This creates the blue brand spinner

Restrict.slds-spinner
ModifierTrue
Selector.slds-spinner_inverse
Summary

This creates the inverse spinner

Restrict.slds-spinner
ModifierTrue
Selector.slds-spinner_xx-small
Summary

This is the extra extra small spinner

Restrict.slds-spinner
ModifierTrue
Selector.slds-spinner_x-small
Summary

This is the extra small spinner

Restrict.slds-spinner
ModifierTrue
Selector.slds-spinner_small
Summary

This is the small spinner

Restrict.slds-spinner
ModifierTrue
Selector.slds-spinner_medium
Summary

This is the medium spinner

Restrict.slds-spinner
ModifierTrue
Selector.slds-spinner_large
Summary

This is the large spinner

Restrict.slds-spinner
ModifierTrue

Spinners Release Notes

2.10.0

Fixed

  • Revised keyframes and transform rules to fix spinner CPU / rendering performance issues.