Topic: How to get loading Spinner on top of mdbModal
Overlay Spinner Not showing on top of mdbmodal Popup
Hi Team,
I have overlay spinner in my main component which i am using to the display ongoing network activity. I have configured Http Interceptor to enable and disable spinner on network activity.
Overlay Spinner works fine, shows up as expected on top of subcomponent on network activity if there is no mdbModal Popup.
But for few pages i have mdbModal popup of taking input which would then trigger request to back-end, in that case Overlay spinner shows Loading spinner below mdbmodal popup.
Could you please help me on how to show the overaly Spinner on top of Mdbmodal popup and disable the intractions until the loading is done.
Please do the needful.
Sample Main Component:
<div class="wrapper">
<div [class.blurred]="showSpinner">
<app-navbar *ngIf="showNavBar"></app-navbar>
<router-outlet></router-outlet>
</div>
<div class="overlay spinner-wrapper" *ngIf="loadingSpinner">
<mdb-spinner spinnerType="big" spinnerColor="blue"></mdb-spinner>
</div>
Thanks and Regards, Karthik
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.4.0
- Device: Browser
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 5 years ago
Could you provide more details about the problem here? Did you try to show/hide the spinner with ngIf directive when certain condition is met?
surabathula karthik pro commented 5 years ago
Yes, i was using ngif to show\hide spinner when there is network activity. Which works perfectly but when i have mdbmodal dialog popup, spinner is getting hidden behind the mdbmodal dialog.
I can see spinner if i close the pop up as the request is taking some time.
It would be great if spinner appears on top of mdbmodal popup as users would be able to understand that activity is still going on
Arkadiusz Idzikowski staff commented 5 years ago
Did you try to add the spinner to the modal content (modal body)? An example html/ts code would help us to debug this problem on our end.