Spinner

lightning-spinner

Displays an animated spinner.

For Use In

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline

::::::tabset{tabs='["Example", "Develop", "Specifications"]'}

:::::tab

::component-playground{component="spinner" model="lwc" namespace="lightning"}

:::::

:::::tab

A lightning-spinner displays an animated spinner image to indicate that a feature is loading. This component can be used when retrieving data or anytime an operation doesn't immediately complete.

The variant attribute changes the appearance of the spinner. If you set variant="brand", the spinner matches the Lightning Design System brand color. Setting variant="inverse" displays a white spinner. The default spinner color is dark blue.

Design

lightning-spinner implements the spinner blueprint in the Salesforce Lightning Design System (SLDS). The spinner adapts to SLDS 1 or SLDS 2 styling based on the org's theme or the container app that you use.

Usage

Here is an example.

<template>
    <lightning-spinner variant="brand" size="large"> </lightning-spinner>
</template>

lightning-spinner is intended to be used conditionally. You can use if:true and if:false or the Lightning Design System utility classes to show or hide the spinner.

<template>
    <lightning-button label="Toggle" variant="brand" onclick={toggle}>
    </lightning-button>

    <div class="slds-m-around_large">
        <p if:true={isLoaded}>Content has been loaded.</p>

        <div if:false={isLoaded} class="slds-is-relative">
            <lightning-spinner alternative-text="Loading...">
            </lightning-spinner>
        </div>
    </div>
</template>

The toggle() function toggles the boolean value of the isLoaded variable.

import { LightningElement, api } from "lwc";

export default class DemoSpinner extends LightningElement {
  @api isLoaded = false;

  // change isLoaded to the opposite of its current value
  toggle() {
    this.isLoaded = !this.isLoaded;
  }
}

Component Styling

Use a combination of variants, sizes, and utility classes to customize the slider.

Variants

Specify the variant attribute with one of these values.

• base is the default variant, which shows a gray animated spinner
• brand shows a blue animated spinner
• inverse shows a white animated spinner, for use on a darker background

Sizes

Specify the size attribute with one of these values.

• xx-small takes up a width of 8px
• x-small takes up a width of 16px
• small takes up a width of 20px
• medium is the default variant, which takes up a width of 32px
• large takes up a width of 44px

Utility Classes

To apply additional styling, use the SLDS utility classes with the class attribute.

:::::

:::::tab ::component-specification{component="spinner" model="lwc" namespace="lightning"}

:::::

::::::