title: How to make real progress bar of jQuery Ajax load request?
body: <p>What I need is an animated progress bar (like the one on youtube) BUT please no plugins!</p>
  
  <p>My ajax request looks like this:</p>
  
  <pre><code>$.ajax({
      xhr: function() {
          var xhr = new window.XMLHttpRequest();
          //Download progress
          xhr.addEventListener("progress", function(evt) {
              if (evt.lengthComputable) {
                  console.log(evt);
                  var percentComplete = evt.loaded / evt.total * 100;
                  //Do something with download progress
                  // this is a static animation but i'm not able to make it work with the precentComplete that i have.
                  $({
                      property: 0
                  }).animate({
                      property: 105
                  }, {
                      duration: 4000,
                      step: function() {
                          var _percent = Math.round(this.property);
                          $('#progress').css('width', _percent + "%");
                          if (_percent == 105) {
                              $("#progress").addClass("done");
                          }
                      },
                      complete: function() {
                          alert('complete');
                      }
                  });
              }
          }, false);
          return xhr;
      },
      type: method,
      url: rest_api,
      headers: headers,
      timeout: 10000,
      dataType: 'json',
      data: http_content,
      beforeSend: function(xhr) {
          // do stuff
      },
      success: function(data, status, xhr) {
          // do stuff
      },
      error: function(xhr, e) {
          // do stuff
      }
  });
  </code></pre>
  
  <p>So, I have an animation already made but I could not link it to be real, this is a static animation but I'm not able to make it work with the precentComplete that I have in the progress event.</p>
  
  <p>Any ideas please? I need more clarification on this XHR2 with working snippet or example for better understanding.</p>
  
  <p>The animation looks like this :<a href="http://jsfiddle.net/23cepqoj/" rel="nofollow">jsFiddle</a></p>