<div class="progress-bar">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<br><br>
<label for="numberOfSeconds">Number of seconds:</label>
<input id="numberOfSeconds" value="5"/>
<button onClick="updateAnim()">Go</button>
.progress-bar{
display: flex;
flex-direction: row-reverse;
width: 100%;
height: 20px;
background: #ddd;
border-radius: 50px;
overflow: hidden;
> div{
flex-grow: 1;
height: 100%;
background-image: linear-gradient(to bottom, #388fe8, #256db8);
transform-origin: 0% 0%;
@for $i from 1 through 60 {
&:nth-child( #{$i} ) {
animation: scaleDown .5s #{$i - 1}s forwards;
}
}
}
}
@keyframes scaleDown{
100%{ transform: scaleX(0) }
}
View Compiled
function updateAnim(){
let numberOfSeconds = $('#numberOfSeconds').val();
$('.progress-bar div').remove();
for( let i = 0; i < numberOfSeconds; i++ ){
let newBar = '<div></div>';
$('.progress-bar').append(newBar);
}
}
This Pen doesn't use any external CSS resources.