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
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 | |
| Restrict | div |
| Variant | True |
| 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 |
| Modifier | True |
| Selector | .slds-spinner_brand |
|---|---|
| Summary | This creates the blue brand spinner |
| Restrict | .slds-spinner |
| Modifier | True |
| Selector | .slds-spinner_inverse |
|---|---|
| Summary | This creates the inverse spinner |
| Restrict | .slds-spinner |
| Selector | .slds-spinner_xx-small |
|---|---|
| Summary | This is the extra extra small spinner |
| Restrict | .slds-spinner |
| Modifier | True |
| Selector | .slds-spinner_x-small |
|---|---|
| Summary | This is the extra small spinner |
| Restrict | .slds-spinner |
| Modifier | True |
| Selector | .slds-spinner_small |
|---|---|
| Summary | This is the small spinner |
| Restrict | .slds-spinner |
| Modifier | True |
| Selector | .slds-spinner_medium |
|---|---|
| Summary | This is the medium spinner |
| Restrict | .slds-spinner |
| Modifier | True |
| Selector | .slds-spinner_large |
|---|---|
| Summary | This is the large spinner |
| Restrict | .slds-spinner |
| Modifier | True |