Spinners

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.

Base

Preview

No content has been added for this component.

No content has been added for this component.

About Base

This is the gray base class for spinner


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.


Overview of CSS Classes

Selector.slds-spinner
Summary

This is the gray base class for spinner

Restrictdiv
VariantTrue
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_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