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.

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

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

Examples

Without container

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

With container

<div class="demo-only demo--inverse" style="height:6rem">
  <div class="slds-spinner_container">
    <div role="status" class="slds-spinner slds-spinner_medium">

Fixed container

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

Right to left support

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

Layout

Inlined

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

Color

Inverse

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

Brand

<div class="demo-only" style="height:6rem">
  <div class="slds-spinner_container">
    <div role="status" class="slds-spinner slds-spinner_medium slds-spinner_brand">

Timing

Delayed

<div class="demo-only" style="height:6rem">
  <div class="slds-spinner_container">
    <div role="status" class="slds-spinner slds-spinner_medium slds-spinner_delayed">

Sizing

Xx-Small

<div class="demo-only" style="height:6rem">
  <div class="slds-spinner_container">
    <div role="status" class="slds-spinner slds-spinner_xx-small">

X-Small

<div class="demo-only" style="height:6rem">
  <div class="slds-spinner_container">
    <div role="status" class="slds-spinner slds-spinner_x-small">

Small

<div class="demo-only" style="height:6rem">
  <div class="slds-spinner_container">
    <div role="status" class="slds-spinner slds-spinner_small">

Medium

<div class="demo-only" style="height:6rem">
  <div class="slds-spinner_container">
    <div role="status" class="slds-spinner slds-spinner_medium">

Large

<div class="demo-only" style="height:6rem">
  <div class="slds-spinner_container">
    <div role="status" class="slds-spinner slds-spinner_large">