javascript - 动画 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>