Spinner

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.

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.

Here is an example.

1<template>
2    <lightning-spinner variant="brand" size="large"> </lightning-spinner>
3</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.

1<template>
2    <lightning-button label="Toggle" variant="brand" onclick={toggle}>
3    </lightning-button>
4
5    <div class="slds-m-around_large">
6        <p if:true={isLoaded}>Content has been loaded.</p>
7
8        <div if:false={isLoaded} class="slds-is-relative">
9            <lightning-spinner alternative-text="Loading...">
10            </lightning-spinner>
11        </div>
12    </div>
13</template>

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

1import { LightningElement, api } from "lwc";
2
3export default class DemoSpinner extends LightningElement {
4  @api isLoaded = false;
5
6  // change isLoaded to the opposite of its current value
7  toggle() {
8    this.isLoaded = !this.isLoaded;
9  }
10}

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

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

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

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