title: XMLHttpRequest main progress bar
body: <p>I have created a progress bar to download images. All work fine just would like to show the download status of all files rather than individual.</p>
  
  <pre><code>var xhrList = [];
  var link = [];
  
  $('img').each(function() {
      link.push($(this).attr("src"));
  });
  var width = $('.logo img').width();
  $('#logo').css({'width': 0, 'overflow': 'hidden'});     
  for (var i=0; i&lt; link.length; i++){
      xhrList[i] = new XMLHttpRequest();
      xhrList[i].open('GET', link[i], true);
      xhrList[i].responseType = "blob";
      console.log(xhrList[i]);
      xhrList[i].onprogress = function(e) {
          if (e.lengthComputable) {
              ProgressPerc = parseInt((e.loaded / e.total) * 100);
              $('#logo').stop().animate({'width': ProgressPerc + '%'},200);}
      };
      xhrList[i].send();
  }
  </code></pre>
  
  <p></p>
  
  <p><a href="https://jsfiddle.net/ag8L9zmk/7/" rel="nofollow noreferrer">https://jsfiddle.net/ag8L9zmk/7/</a></p>