How to show a running progress bar while page is loading

Question

I want to show a running progress bar while my page is loading like here, in my page. I used a simple loading image in my example, but I want to convert it in a running progress bar. Here is my code:

$(window).load(function() {      alert("hi");      $('#loading').hide();  });

#loading {      width: 100%;      height: 100%;      top: 0px;      left: 0px;      position: fixed;      display: block;      opacity: 0.7;      background-color: #fff;      z-index: 99;      text-align: center;  }    #loading-image {      position: absolute;      top: 100px;      left: 240px;      z-index: 100;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>  <div id="loading">      <img id="loading-image" src="http://cdn.nirmaltv.com/images/generatorphp-thumb.gif" alt="Loading..." />  </div>  <div id="txt">      <h2>Let AJAX change this text</h2>  </div>  <button>Change Content</button>

Here is a JSFiddle

Answer 1

I have copied the relevant code below from This page. Hope this might help you.

$.ajax({   xhr: function() {     var xhr = new window.XMLHttpRequest();     //Upload progress     xhr.upload.addEventListener("progress", function(evt) {       if (evt.lengthComputable) {         var percentComplete = evt.loaded / evt.total;         //Do something with upload progress         console.log(percentComplete);       }     }, false);     //Download progress     xhr.addEventListener("progress", function(evt) {       if (evt.lengthComputable) {         var percentComplete = evt.loaded / evt.total;         //Do something with download progress         console.log(percentComplete);       }     }, false);     return xhr;   },   type: 'POST',   url: "/",   data: {},   success: function(data) {     //Do something success-ish   } }); 

Answer 2

It’s a chicken-and-egg problem. You won’t be able to do it because you need to load the assets to display the progress bar widget, by which time your page will be either fully or partially downloaded. Also, you need to know the total size of the page prior to the user requesting in order to calculate a percentage.

It’s more hassle than it’s worth.