Topic: Loading Management
I need to see if there is a better way to do this. I am using it in Asp.net core 5 mvc app. I wanted the loader on the whole page. Its not hiding by itself so here are the snippets.
<div class="loading">
<div class="fas fa-spinner fa-spin fa-2x loading-icon"></div>
<span class="loading-text">Loading...</span>
</div>
And in jquery on load
$(window).on('load', function () {
$('.loading-backdrop').hide();
$('.loading').hide();
});
The backdrop wasnt hiding. Please advise if there is a better way to do this.
Have you checked this example: https://mdbootstrap.com/docs/standard/methods/loading-management/#section-full ? Try using remove() instead of hide(). And remember to update body overflow:
$('body').css('overflow', '');
devtrix pro commented 3 years ago
Got it. It was remove(), I made a mistake here. Thanks.
devtrix pro commented 3 years ago
I did change it to remove() but it doesnt work in FireFox. Upon inspection it is at the bottom before the body tag ends. I have tried everything, its still getting inserted after window.load event. It works in Google Chrome, MS Edge & Opera but not in FireFox.
I did create a solution that works. I am using window.lod & window.before unload event. I just wanted to let you guys know that FireFox has issues with your solution.
Grzegorz Bujański staff commented 3 years ago
Which solution do you mean? The one I sent is not listening to these events.
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 Standard
- MDB Version: MDB5 3.9.0
- Device: N/A
- Browser: N/A
- OS: N/A
- Provided sample code: No
- Provided link: No