jQuery Ajax Progress Bar

by Mahbub Alam

HTML

<div class="progress"></div>

CSS

.progress {
  display: block;
  text-align: center;
  width: 0;
  height: 3px;
  background: red;
  transition: width .3s;
}

.progress.hide {
  opacity: 0;
  transition: opacity 1.3s;
}

JavaScript

var data = [];
for (var i = 0; i < 100000; i++) {
  var tmp = [];
  for (var i = 0; i < 100000; i++) {
    tmp[i] = 'hue';
  }
  data[i] = tmp;
};
$.ajax({
  xhr: function() {
    var xhr = new window.XMLHttpRequest();
    xhr.upload.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        console.log(percentComplete);
        $('.progress').css({
          width: percentComplete * 100 + '%'
        });
        if (percentComplete === 1) {
          $('.progress').addClass('hide');
        }
      }
    }, false);
    xhr.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        console.log(percentComplete);
        $('.progress').css({
          width: percentComplete * 100 + '%'
        });
      }
    }, false);
    return xhr;
  },
  type: 'POST',
  url: "/echo/html",
  data: data,
  success: function(data) {}
});