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?

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?

• javascript
• jquery
• html
• load

• the most likely explanation is that there is an error in your load function....check the console! – David Commented Jul 17, 2016 at 22:19
• "but the content does not appear" Try substituting .attr( 'href' ) for .attr( 'ref' ) – guest271314 Commented Jul 17, 2016 at 22:20
• Can you include html at Question? – guest271314 Commented Jul 17, 2016 at 22:33

1 Answer 1

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.