title: How to make the progress bar percent centered
body: <p>My problem is the percent <code>100%</code> is not exactly in the center. I tried spacing it in the JavaScript, but it's not working.</p>
  
  <p>Current output: <a href="http://jsfiddle.net/GZSH6/53/" rel="nofollow noreferrer">http://jsfiddle.net/GZSH6/53/</a></p>
  
  <blockquote>
    <p><img src="https://i.stack.imgur.com/xomG8.png" alt="enter image description here"></p>
  </blockquote>
  
  <p>JavaScript:</p>
  
  <pre><code>var progress = setInterval(function () {
      var $bar = $('.bar');
  
      if ($bar.width() &gt;= 550) {
          clearInterval(progress);
          $('.progress').removeClass('active');
      } else {
          $bar.width($bar.width() + 55);
      }
      $bar.text($bar.width() / 5.5 + "%  ");
  }, 800);
  </code></pre>