Animated CSS Progress Bar

Question

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.

Be grateful for any help

CSS

.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;
}

HTML

<div id="progressBar" class="progress_bar"></div>

JavaScript

 // 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 = <?php echo round($percentage150,2); ?>+"%";
  progress.style.backgroundColor = "green";
}
,100);

Answer 1

I suggest you to insert a hidden element with the percent and show it once the transition is done.

What do you think of this solution ?

 // Assign your element ID to a variable. var progress = document.getElementById("progressBar"); var percent = progress.getElementsByClassName("percent")[0]; // Pause the animation for 100 so we can animate from 0 to x% setTimeout( function() { progress.style.width = "100%"; // PHP Version: // progress.style.width = <?php echo round($percentage150,2); ?>+"%"; progress.style.backgroundColor = "green"; setTimeout(function() { percent.style.display = "block"; }, 4100); }, 100); 

 .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; text-align: center; } .progress_bar .percent { display: none; } 

 <div id="progressBar" class="progress_bar"><span class="percent">100%</span></div> 

Answer 2

You could give a delay on color from transparent to black via rgba()

here a codepen to play with : http://codepen.io/anon/pen/QwRRGG

 // 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 = <?php echo round($percentage150,2); ?>+"%"; progress.style.backgroundColor = "green"; progress.style.color = "rgba(0,0,0,1)"; }, 100); 

 .progress_bar { height: 15px; background: orange; width: 0%; -moz-transition: background-color 4s ease, width 4s ease , color 0s 4s; -webkit-transition: background-color 4s ease, width 4s ease , color 0s 4s; transition: background-color 4s ease, width 4s ease , color 0s 4s; color:rgba(0,0,0,0); text-align:right } 

 <div id="progressBar" class="progress_bar">100%</div>