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

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