Spinners
- HTML/CSS:Dev Ready
- Layout:Responsive
Sections
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>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
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>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
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">
<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#
<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#
<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#
<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#
<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#
<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#
<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#
<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#
<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#
<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#
<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#
<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
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
Selector | .slds-spinner |
---|---|
Summary | |
Support | dev-ready |
Restrict | div |
Variant | True |
Selector | .slds-spinner_inline |
---|---|
Summary | Returns the spinner back into the document flow |
Restrict | .slds-spinner |
Modifier | 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 |
Modifier | True |
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 |
Spinners Release Notes
2.10.0
Fixed
- Revised keyframes and transform rules to fix spinner CPU / rendering performance issues.