title: Ajax loading bar function
body: <p>I know there are a few post about this but they dont cover what i need to achieve.</p>
  
  <p>I'm trying to get the youtubelike loading bar to work properly.</p>
  
  <p>And i found this :</p>
  
  <pre><code>var data = [];
  for (var i = 0; i &lt; 100000; i++) {
      var tmp = [];
      for (var i = 0; i &lt; 100000; i++) {
          tmp[i] = 'hue';
      }
      data[i] = tmp;
  };
  
         xhr: function () {
                  var xhr = new window.XMLHttpRequest();
                  var percentComplete = 0; &lt;--------------------------added this
                  $('.progress').removeClass('hide');&lt;----------------and this
                  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;
              }
  </code></pre>
  
  <p>I have added 2 lines because it would only work once as the hidden value was not being removed after the completion. Also put the width back to 0. I also like the fact that it seams to be calculating the real percentage of the event.</p>
  
  <p>This is working great. Howerver, i want to turn this into a function that can be called for all my ajax call like this:</p>
  
  <pre><code>$(document).ready(function () {
      $("a").on("click", function (event) {
          event.preventDefault();
          var id = ($(this).attr("id"));
          var container = ($(this).attr("data-container"));
          var link = ($(this).attr("href"));
          var text = ($(this).text());
          var html = ($(this).html());
          MY_LOADING_BAR_FUNCTION();&lt;-----------------------------------Here i guess?
          $.ajax({
  
              url: 'ajax-php.php',
              type: 'post',
              data: { 'action': 'click', 'id': id, 'text': text, 'link': link, 'html': html },
              success: function (data, status) {
                  if (container == '#formbox') {
                      $("#screen").addClass("visible");
                  }
                  $(container).html(data);
              },
              error: function (xhr, desc, err) {
                  console.log(xhr);
                  console.log("Details: " + desc + "\nError:" + err);
              }
          }); // end ajax call
      }); // end on click
  }); // en document ready
  </code></pre>
  
  <p>But i also ran across the Ajax setup that looks like this.</p>
  
  <pre><code>   $.ajaxSetup({
      beforeSend: function() {
  
      },
      complete : function() {
  
      }
  });
  </code></pre>
  
  <p>Right now i got it to work by putting the entire code of the <code>xhr: function ()</code> inside my ajax call. But i dont want to do it every time.</p>
  
  <p>So these are the 2 options i have found that could work but i cant get them to work the way i want. I try to make a <code>MY_LOADING_BAR_FUNCTION()</code> but i'm getting a deprecated error.</p>
  
  <p>Can anyone tell me how to make this work please.</p>
  
  <p>Thank you everyone!</p>