title: Animated CSS Progress Bar
body: <p>I have found a neat animated css progress bar but am struggling extending what what it can do. I have it so that I have an animated progress bar but I want to be able to show the actual percentage once the animated bar has completed - to the right of the bar.</p>
  
  <p>Be grateful for any help</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.progress_bar 
  {
      height: 15px;
      background: orange;
      width: 0%;
      -moz-transition: all 4s ease;
      -moz-transition-delay: 1s;
      -webkit-transition: all 4s ease;
      -webkit-transition-delay: 1s;
      transition: all 4s ease;
      transition-delay: 1s;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="progressBar" class="progress_bar"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code> // Assign your element ID to a variable.
  var progress = document.getElementById("progressBar");
  // Pause the animation for 100 so we can animate from 0 to x%
  setTimeout(
    function(){
      progress.style.width = "100%";
    // PHP Version:
    // progress.style.width = &lt;?php echo round($percentage150,2); ?&gt;+"%";
    progress.style.backgroundColor = "green";
  }
  ,100);
  </code></pre>