title: Bootstrap Page Load Progress bar animation
body: <p>I want to have a page loaded into a div and while the page is loading display a progress bar ( preferably somewhat close to the actual progress of the page load ) and then after the page is loaded slideUp the bar and display the content.</p>
  
  <p>Current chain of events:</p>
  
  <ol>
  <li>User Click Links</li>
  <li>Progress Bar Slides Down</li>
  <li>Progress Bar Animates to Page Load</li>
  <li>Progress Bar Slides Up</li>
  <li>Page Content Displays</li>
  </ol>
  
  <p>Code:</p>
  
  <pre><code>function pageLoad(url){
      $('body').css('cursor','wait');
      $('#page-load-wrap').slideDown();
      width = $('#page-load-indicator').css('width','100%');
      $('#mainframe').load(url,function(){
          $('#page-load-wrap').slideUp();
          $('body').css('cursor','default');
      }); 
  }
  </code></pre>
  
  <ol>
  <li>How would I modify this code to match the actual progress of the resource load?  </li>
  <li>How can I slideUp the div before the content appears?</li>
  </ol>
  
  <p>=======EDIT=======</p>
  
  <p>Using the code in the answer below I just set the width to 80% before the get function call
  then in the success call set it to 100%. Slid the div Up and then displayed the html</p>
  
  <pre><code>       function pageLoad(url){
                  $('body').css('cursor','wait');
                  $('#mainframe').html('');
                  $('#page-load-wrap').slideDown();
                  $('#page-load-indicator').css('width','80%');
  
                  $.get(url,function(data){
                  $('#page-load-indicator').css('width','100%');
                  $('#page-load-wrap').slideUp('slow',function(){
                      $('#mainframe').html(data);
                  });
                  $('body').css('cursor','default');
                  }); 
              }
  </code></pre>