title: Wordpress Jquery Ajax form progress bar loading quickly after showing response
body: <pre><code>jQuery('.progress', form).css('width', '0');
  jQuery.ajax({
  
          xhr: function () {
  
              var xhr = new window.XMLHttpRequest();
              xhr.addEventListener("progress", function (evt) {
                  if (evt.lengthComputable) {
                      var percentComplete = evt.loaded / evt.total;
                      percentComplete = parseInt(percentComplete * 100);
                      jQuery('.progress', form).text(percentComplete + '%');
                      jQuery('.progress', form).css('width', percentComplete + '%');
                  }
              }, false);
              return xhr;
          },
          type: 'POST',
          url: badnc_ajax.ajaxurl,
          data: data,
          success: function (data) {
              jQuery("div[id='results']", form).css('display', 'block');
              jQuery("div[id='loading']", form).css('display', 'none');
              jQuery("div[id='results']", form).html(unescape(data));
          }
  
      });
  </code></pre>
  
  <p>This code is showing progressbar when I submit the form. Only problem is progressbar shows after receiving the response.</p>
  
  <p>I mean progressbar shows after displaying the message from PHP file.</p>
  
  <p>I want to show the percent counter increasing and whenever it reaches 100% then show response.</p>