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

您可以通过delay

从color发送transparent black到rgba()

这里有一个可以玩的代码：http://codepen.io/anon/pen/QwRRGG

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;