Spinner in Lightning Web Component

1. Component Sized Spinner

If you want to show the spinner that covers only your component then use this HTML tag and style combination to show that

<lightning-button
	label="Toggle"
	variant="brand"
	onclick={toggle}>
	</lightning-button>
<br/>
<div if:true={isLoaded}>
            <lightning-spinner alternative-text="Loading..."></lightning-spinner>
</div>
@api isLoaded = false;

toggle() {
    this.isLoaded = !this.isLoaded;
}

2. Full Page Sized Spinner

If your requirement is to show a spinner which should cover the entire page while it is displayed then using the code below

<lightning-button
	label="Toggle Full"
	variant="brand"
	onclick={toggleFull}>
	</lightning-button>
<br/>
<div if:true={isLoadedFull}>
	<lightning-spinner style="position: fixed;" alternative-text="Loading..."></lightning-spinner>
	<div style="position: fixed;" class="slds-backdrop slds-backdrop_open"></div>
</div>
@api isLoadedComp = false;
		
toggleComp() {
	this.isLoadedComp = !this.isLoadedComp;
}

Along with the code above, please ensure that you do not have any other CSS affecting the spinner in your style class.

Spinner LWC Documentation

Spinner SLDS Documentation

Was this post useful? If yes then please share.



Leave a Comment

All fields marked with an asterisk (*) are required


shares