title: show progressbar while loading pages using jquery ajax in single page website
body: <p>I have a basic page with a navigation bar on top, and a wrapper body.</p>
  
  <p>Whenever a user clicks on a navigation link it uses <code>.load</code> to load the page content into the wrapper div.</p>
  
  <pre><code>$(this).ajaxStart(function(){$('.progressbar .bar').css('width','5%');$('.progressbar').fadeIn();});
  $(this).ajaxEnd(function(){$('progressbar').hide();});
  
  $('.ajaxspl').on('click',function(e){
      e.preventDefault();
  
      var url=$(this).data('url'),
          wrap=$('body #wrap');
  
      //clean the wrapper
      wrap.slideUp().html('');
  
      //load page into wrapper
      wrap.load(url,function(){wrap.slideDown();});
  });
  </code></pre>
  
  <p>Example of return value from <code>.load</code>:</p>
  
  <pre><code>&lt;div&gt;
  ...content
  &lt;/div&gt;
  &lt;script&gt;$('.progressbar .bar').css('width','30%');&lt;/script&gt;
  &lt;link href="/assets/css/datepicker.css" rel="stylesheet" /&gt;
  &lt;script&gt;$('.progressbar .bar').css('width','60%');&lt;/script&gt;
  &lt;link href="/assets/css/main.css" rel="stylesheet" /&gt;
  &lt;script&gt;$('.progressbar .bar').css('width','90%');&lt;/script&gt;
  &lt;script&gt;//blah blah&lt;/script&gt;
  </code></pre>
  
  <p>As you can see, I have a Bootstrap progress bar that I show on <code>ajaxstart()</code>, and on the page that I call I modify that value of the progress bar after each item is loaded.</p>
  
  <p>This works nicely on Firefox and I can see the progress bar while waiting for the page to load, but it does not work on Chrome or IE.</p>
  
  <p>Is there a better way to do this? Am I doing this correctly or is there another method to do this? </p>
  
  <p>For example, getting <code>$.ajax</code> page size in kb and update progress bar on the fly as data is received?</p>
  
  <p>I am trying to produce something similar to the Loading page when Gmail is loading.</p>