Hello, friends today we will learn about add Spinner in Lightning Web Component (LWC) Salesforce Spinner in LWC. We will show a spinner whenever load the data from the server or load the logic. In this way, we can give a better user experience to any user that something is in process. Let’s understand with a simple example.
Check out:Spinner in Lightning Component
LWCSpinner.html :
<template>
<div class="slds-tabs_card">
<div class="slds-page-header">
<div class="slds-page-header__row">
<div class="slds-page-header__col-title">
<div class="slds-media">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-opportunity">
<lightning-icon icon-name="standard:recipe" alternative-text="recipe" title="recipe"></lightning-icon>
</span>
</div>
<div class="slds-media__body">
<div class="slds-page-header__name">
<div class="slds-page-header__name-title">
<h1>
<span>Show Spinner in LWC</span>
<span class="slds-page-header__title slds-truncate" title="Recently Viewed">TechDicer</span>
</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <br/>
<lightning-card variant="Narrow" title="Spinner Component" icon-name="standard:account">
<div class="slds-p-around_medium">
<lightning-button label="Show Spinner" variant="brand" onclick={handleSpinner}>
</lightning-button>
<div class="slds-m-around_large">
<p if:false={showSpinner}>Content has been loaded.</p>
<!--- Spinner code ---->
<div if:true={showSpinner} class="slds-is-relative">
<lightning-spinner
alternative-text="Loading..." variant="brand">
</lightning-spinner>
</div>
</div>
</div>
</lightning-card>
<br/>
</template>
LWCSpinner.Js :
import { LightningElement, track } from 'lwc';
export default class LWCSpinner extends LightningElement {
@track showSpinner = false;
handleSpinner(event){
this.showSpinner = !this.showSpinner;
}
}
What’s your Reaction?
+1
1
+1
1
+1
+1
+1
+1
1
Total views : 1146223