Javascript 动画CSS进度条

我发现了一个整洁的动画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);

//将元素ID分配给变量。
var progress=document.getElementById（“progressBar”）；
//将动画暂停100，以便我们可以从0到x%设置动画
设置超时(
函数（）{
progress.style.width=“100%”；
//PHP版本：
//progress.style.width=+“%”；
progress.style.backgroundColor=“绿色”；
}
,100);

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

你认为这个解决方案怎么样

//将元素ID分配给变量。
var progress=document.getElementById（“progressBar”）；
var percent=progress.getElementsByClassName（“百分比”）[0]；
//将动画暂停100，以便我们可以从0到x%设置动画
设置超时(
函数（）{
progress.style.width=“100%”；
//PHP版本：
//progress.style.width=+“%”；
progress.style.backgroundColor=“绿色”；
setTimeout（函数（）{
percent.style.display=“block”；
}, 4100);
}, 100);
。进度条{
高度：15px；
背景：橙色；
宽度：0%；
-moz过渡：所有4s都很轻松；
-moz转换延迟：1s；
-webkit过渡：所有4s轻松；
-webkit转换延迟：1s；
过渡：所有4s轻松；
过渡延迟：1s；
文本对齐：居中；
}
.progress_bar.百分比{
显示：无；
}
100%
您可以通过
rgba（）

这里有一个可以使用的代码笔：


//将元素ID分配给变量。
var progress=document.getElementById（“progressBar”）；
//将动画暂停100，以便我们可以从0到x%设置动画
设置超时(
函数（）{
progress.style.width=“100%”；
//PHP版本：
//progress.style.width=+“%”；
progress.style.backgroundColor=“绿色”；
progress.style.color=“rgba（0,0,0,1）”；
}, 100);
。进度条{
高度：15px；
背景：橙色；
宽度：0%；
-moz过渡：背景色4s缓，宽度4s缓，颜色0s4s；
-webkit过渡：背景色4s缓，宽度4s缓，颜色0s 4s；
过渡：背景色4s缓，宽度4s缓，颜色0s4s；
颜色：rgba（0,0,0,0）；
文本对齐：右对齐
}
100%
您希望仅当进度条100%完成时才显示百分比？？是-动画完成后，只需将百分比显示在一个范围内或带有“显示：无”的内容中，然后在计时器完成后，将该范围和“显示：块”作为目标尝试使用以下方法：