动画CSS进度栏

Question

我找到了一个整洁的动画CSS进度栏，但是正在努力扩展它的功能。 我有它，所以我有一个动画进度栏，但是我希望能够在动画栏完成后显示实际的百分比-在该栏的右边。

感谢您的帮助

的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

我建议您插入带有百分比的隐藏元素，并在转换完成后显示它。

您如何看待该解决方案？

 // 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

您可以通过rgba() color从transparent delay为black

这是一个可与之一起玩的Codepen： 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>