JQuery - How to show a spinner while loading content in a div?
<p>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:</p>

<pre><code>$( '.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);
});
</code></pre>

<p>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.</p>

<p><a href="http://run.plnkr.co/plunks/dz1rXS/" rel="nofollow">Here is a full code example in plnkr</a></p>

<p>Any suggestions?</p>