Components

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.

ColorsColors › DefaultColors › BrandColors › InverseColorsdev ready

Preview

Code

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

SizesSizes › X-smallSizes › SmallSizes › MediumSizes › LargeSizesdev ready

Preview

Code

The extra small spinner can be positioned over the end of an input to indicate loading.

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

ContainersContainers › Without ContainerContainers › With ContainerContainers › Fixed ContainerContainersdev ready

Preview

Code

A container is not required to use the spinner. Here, it is placed on a dark background to illustrate there is nothing there. The spinner will position itself to the closest positioned parent. So if you want it to spin over a single component, the class .slds-is-relative can be added to the parent.

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

Component Overview

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.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to create different scroller looks.
Class NameUsage
.slds-spinner
Applied to:

<div>

Outcome:

This is the gray base class for spinner

Required:

Required

Comments:

--

.slds-spinner_container
Applied to:

outer <div>

Outcome:

This container creates a full overlay to dim the page when needed

Required:

No, optional element or modifier

Comments:

--

.slds-spinner--x-small
Applied to:

.slds-spinner

Outcome:

This is the x-small spinner

Required:

No, optional element or modifier

Comments:

--

.slds-spinner--small
Applied to:

.slds-spinner

Outcome:

This is the small spinner

Required:

No, optional element or modifier

Comments:

--

.slds-spinner--medium
Applied to:

.slds-spinner

Outcome:

This is the medium spinner

Required:

No, optional element or modifier

Comments:

--

.slds-spinner--large
Applied to:

.slds-spinner

Outcome:

This is the large spinner

Required:

No, optional element or modifier

Comments:

--

.slds-spinner--brand
Applied to:

.slds-spinner

Outcome:

This creates the blue brand spinner

Required:

No, optional element or modifier

Comments:

--

.slds-spinner--inverse
Applied to:

.slds-spinner

Outcome:

This is the inverse spinner

Required:

No, optional element or modifier

Comments:

--

.slds-spinner__dot-a
Applied to:

<div>

Outcome:

This creates two of the circles

Required:

Required

Comments:

--

.slds-spinner__dot-b
Applied to:

<div>

Outcome:

This creates two of the circles

Required:

Required

Comments:

--