Анимированный CSS Progress Bar

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()

здесь в 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>