Spinner

lightning:spinner

Displays an animated spinner.

For Aura components only. For LWC development, use lightning-spinner.

For Use In

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

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.

This component implements styling from spinners in the Lightning Design System.

Here is an example.

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

This client-side controller toggles the slds-hide class on the spinner.