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.
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
position:fixed so that it remains centered in the viewport.
The background overlay for the spinner is an optional element.
A spinner should have the Aria
role="status" and contain assistive text that explains what is currently happening.
Overview of CSS Classes
- The CSS class being referred to.
- A description of what the class does.
- 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).
- The selector that the class name is allowed to be used on.
- 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.
- 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.