---
schema_version: "1"
id: 965f21c8a468fec671d885f92ca022c2bf9b97a007b4c9d7ac841b0b293f6f90
title: Spinner
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/spinner/lightning-spinner.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-spinner.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 67b4553575653ec0d96fcaec54107a34f32bec8ac01f3ec53992fd335b3032d5
products:
  - Lightning Component Reference
---

# 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.

|                | SLDS 1                                                                                                                                | SLDS 2                                                                                                          |
| :------------- | :------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------- |
| **Design**     | [Spinner](https://v1.lightningdesignsystem.com/components/spinners/)                                                                  | [Spinner](https://www.lightningdesignsystem.com/components/spinners/)                                           |
| **For Use In** | Lightning Experience, Experience Builder sites, Salesforce mobile app, Lightning Out (Beta), Standalone Lightning app, Mobile Offline | [Lightning Experience](https://help.salesforce.com/s/articleView?id=xcloud.customize_ui_enhancedlex.htm&type=5) |

## Usage

Here is an example.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-spinner variant="brand" size="large"> </lightning-spinner>
</template>
```
<!-- prettier-ignore-end -->

`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.

<!-- prettier-ignore-start -->
```html
<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>
```
<!-- prettier-ignore-end -->

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

```javascript
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](https://v1.lightningdesignsystem.com/utilities/alignment) with the `class` attribute.


:::::

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

:::::

::::::