Add Spinner in Lightning Web Component (LWC) Salesforce

by Rijwan Mohmmed
0 comment

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 :

    <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>
						<div class="slds-media__body">
							<div class="slds-page-header__name">
								<div class="slds-page-header__name-title">
										<span>Show Spinner in LWC</span>
										<span class="slds-page-header__title slds-truncate" title="Recently Viewed">TechDicer</span>
	</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}>
            <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">
                        alternative-text="Loading..." variant="brand">

LWCSpinner.Js :

import { LightningElement, track } from 'lwc';
export default class LWCSpinner extends LightningElement {
    @track showSpinner = false;

        this.showSpinner = !this.showSpinner;

You may also like

Leave a Comment