Hello, friends today we will learn about add Spinner in Modal/Popup in Lightning Web Component (LWC) Salesforce. 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. Spinner Modal/Popup LWC Salesforce.
There is a problem when we show the spinner in the modal/popup. It shows on the whole screen instead show only in modal body. For this, we just need a custom CSS position: relative in spinner parent div. Let’s understand with a simple example.
Checkout : Spinner in LWC
LWCModalSpinner.Html :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | <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 Modal Body LWC</span> <span class="slds-page-header__title slds-truncate" title="Recently Viewed">TechDicer</span> </h1> </div> </div> </div> </div> </div> <div class="slds-page-header__col-actions"> <div class="slds-page-header__controls"> <div class="slds-page-header__control"> <ul class="slds-button-group-list"> <li> <lightning-button name="openModal" label="Open Modal" onclick={openCloseModal} variant="brand" class="slds-m-around_small"></lightning-button> </li> </ul> </div> </div> </div> </div> </div> </div> <br/> <!-- This Modal will only be visible if showModal is set to true --> <template if:true={showModal}> <section aria-modal="true" class="slds-modal slds-fade-in-open"> <div class="slds-modal__container "> <header class="slds-modal__header"> <h2 class="slds-text-heading_small">Modal Header</h2> <lightning-icon class="slds-modal__close" icon-name="utility:close" size="small" onclick={openCloseModal}></lightning-icon> </header> <div class="slds-modal__content modalBodySpinner"> <template if:true={showLoading}> <lightning-spinner alternative-text="Loading" size="medium" class="spinnerClass"></lightning-spinner> </template> <div class="slds-p-around_small"> <p> We will show spinner when ever load the data from server or load the logics. By this way we can give a better user experience to any user that something is in process. There is a problem when we show the spinner in modal/popup. It show in whole screen instead show only in modal body. For this we just need a custom css position:relative in spinner parent div. Lets understand with a simple example. </p> </div> </div> <footer class="slds-modal__footer"> <lightning-button variant="brand" label="Show/Hide Spinner" onclick={showHideSpinner} class="slds-p-around_x-small"></lightning-button> <lightning-button variant="brand" label="Cancel" onclick={openCloseModal} class="slds-p-around_x-small"></lightning-button> </footer> </div> </section> <div class="slds-backdrop slds-backdrop_open"></div> </template></template> |
LWCModalSpinner.Js :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | import { LightningElement, track } from 'lwc';export default class LWCModalSpinner extends LightningElement { @track showModal = false; @track showLoading = false; openCloseModal() { // Setting boolean variable show/hide modal this.showModal = !this.showModal; } showHideSpinner() { // Setting boolean variable show/hide spinner this.showLoading = !this.showLoading; }} |
LWCModalSpinner.css :
1 2 3 | .modalBodySpinner{ position: relative;;} |
What’s your Reaction?
+1
1
+1
+1
+1
+1
1
+1
Total views : 1171996
4 comments
you are truly a excellent webmaster. The web site loading velocity is amazing.
It seems that you are doing any unique trick. In addition,
The contents are masterwork. you have done a wonderful
job in this matter!
Thank you
My brother recommended I might like this blog. He was entirely right.
This post truly made my day. You cann’t imagine just how much time
I had spent for this info! Thanks!
One suggestion for above solution instead of using internal css
Can be replaced with :