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
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.
| SLDS 1 | SLDS 2 | |
|---|---|---|
| Design | Spinner | Spinner |
| For Use In | Lightning Experience, Experience Builder sites, Salesforce mobile app, Lightning Out (Beta), Standalone Lightning app, Mobile Offline | Lightning Experience |
Here is an example.
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.
The toggle() function toggles the boolean value of the isLoaded variable.
Use a combination of variants, sizes, and utility classes to customize the slider.
Specify the variant attribute with one of these values.
baseis the default variant, which shows a gray animated spinnerbrandshows a blue animated spinnerinverseshows a white animated spinner, for use on a darker background
Specify the size attribute with one of these values.
xx-smalltakes up a width of 8pxx-smalltakes up a width of 16pxsmalltakes up a width of 20pxmediumis the default variant, which takes up a width of 32pxlargetakes up a width of 44px
To apply additional styling, use the SLDS utility classes with the class attribute.