title: Progress bar for multiple ajax requests with stages of completion. Is it possible?
body: <p>I have a simple form which when submitted validates via an ajax request. If the form checks out ok, then another ajax request is made to process the data originally submitted.</p>
  
  <p>I want to build a progress bar for this. Ive found that adding this code to each ajax request returns the progress for each call separately. That makes the progress bar load to 100%, twice, quickly. </p>
  
  <p>Is it possible for example for two ajax request to each fill 50% of the progress bar?... So ajax request 1 will fill up to 50% and the second will fill from 51% to 100%? Or is that crazy?</p>
  
  <p>Or if three ajax calls each being responsible for 33.33% of the total percentage?</p>
  
  <p>I guess we are more looking at stages of completion as well as progress. </p>
  
  <p>Any ideas how this could be achieved without too much faking it?</p>
  
  <pre><code>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('percent uploaded: ' + (percentComplete * 100));
      }
  }, false);
  //Download progress
  xhr.addEventListener("progress", function (evt) {
      if (evt.lengthComputable) {
          var percentComplete = evt.loaded / evt.total;
          //Do something with download progress
          console.log('percent downloaded: ' + (percentComplete * 100));
      }
  }, false);
  return xhr;
  </code></pre>