Topic: Loading Management

devtrix pro asked 2 years ago


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.


Grzegorz Bujański staff answered 2 years ago


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 2 years ago

Got it. It was remove(), I made a mistake here. Thanks.


devtrix pro commented 2 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 2 years ago

Which solution do you mean? The one I sent is not listening to these events.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: 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