CODEWITHSUNDEEP
javascriptjqueryhtmlload
Brad
Brad

Reputation: 4547

JQuery - How to show a spinner while loading content in a div?

I have a navigation bar with some links inside it. When clicking any link it loads a content from a corresponding html page in a div found beside the navigation bar. Since loading the content could take a couple of seconds i am trying to show a spinner while the content is loaded. Here is a sample code i have tried:

$( '.nav_link' ).click( function( e ) {
    $( '.div_content' ).html('');

    var link = $(this);
    setTimeout(function() {
        $( ".div_content" ).load( link.attr( 'ref' ) );
    }, 1000);

    $( '.spinner' ).show();  // show Loading Div

    setTimeout(function() {
        $( '.spinner' ).hide(); // hide loading div
    },1500);
});

The above code shows the spinner and it starts spinning, then it stops and freezes till the content is loaded. The spinner then disappears and the content appears just fine. Instead of this freezing spinner i need to make it keep spinning till the content is fully loaded.

Here is a full code example in plnkr

Any suggestions?

Upvotes: 0

Views: 13263

Answers (1)

Brad
Brad

Reputation: 4547

I have finally found an interesting solution to my question. Using a GIF spinner image will freeze while loading the html content in the div, so instead i have used a css created spinner which has worked smoothly without freezing. It can be created as explained here.

Upvotes: 2

Related Questions