title: Display percentage in Jquery progressbar
body: <p>I have a progress bar updated dynamically in my page, I would like to dislay the percentage in middle of it, but I cannot figure out how. This is my progress bar on my page:</p>
  
  <pre><code>&lt;div class="progress progress-striped active"&gt; 
     &lt;div id="prog" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"&gt;
        &lt;span id="progress-value"&gt;&lt;/span&gt;
     &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my jQuery code that Updates the progress bar:</p>
  
  <pre><code>$.ajax({    
      xhr: function () {
          var xhr = new window.XMLHttpRequest();
          xhr.upload.addEventListener("progress", function (evt) {
              if (evt.lengthComputable) {
                  var pct = evt.loaded / evt.total;
  
                  $("#prog").css({ width: pct * 100 + '%' });
                  $('#progress-value').html(pct * 100);
  
              }
          }, false);
  
          xhr.addEventListener("progress", function (evt) {
              if (evt.lengthComputable) {
                  var pct = evt.loaded / evt.total;
  
                  $("#prog").css({ width: pct * 100 + '%' });
                  $('#progress-value').html(pct*100);
                  if (pct === 1) {
                      $('#prog').addClass('hide');
                  }
              }
          }, false);
          return xhr;
      },
  </code></pre>
  
  <p>Ity updates the progress bar, as I see it progressing during data loading, but it doesn't display the percentage. What am I doing wrong?</p>