Lefseq,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
progress {
width: 300px;
font-size: .6em;
height: 12px;
border: none;
border-radius: 8px;
background-color: #a9a9a9;
line-height: 12px;
padding: 2px 1px;
}
progress::-webkit-progress-bar {
height: 12px;
font-size: .6em;
border: 1px solid transparent;
border-radius: 8px;
background-color: #a9a9a9;
line-height: 8px;
}
progress::-webkit-progress-value {
height: 8px;
background-color: var(--color, #f00);
border-radius: 5px;
}
progress::-moz-progress-bar {
height: 8px;
background-color: var(--color, #f00);
border-radius: 5px;
}
</style>
<script>
</script>
</head>
<body>
<progress id="user-progress" value="0" max="100"></progress>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
const animate = ({timing, draw, duration, resolve}) => {
let start = performance.now();
const loop = time => {
let timeFraction = (time - start) / duration;
if (timeFraction > 1) timeFraction = 1;
let progress = timing(timeFraction);
draw(progress);
if (timeFraction < 1) {
requestAnimationFrame(loop);
}
else resolve();
};
requestAnimationFrame(loop);
};
function inOutQuad(n){
n *= 2;
if (n < 1) return 0.5 * n * n;
return - 0.5 * (--n * (n - 2) - 1);
};
function easeOutExpo( t ) {
if( t === 1 ) {
return 1;
}
return ( -Math.pow( 2, -10 * t ) + 1 );
}
function linear(t)
{
return t;
}
const data = [ 3, 5, 9, 4, 7];
const progressElement = document.getElementById('user-progress');
const draw = progress => progressElement.value = Math.round(progress * 100) ;
data.reduce((promise, sec) => {
return promise.then(() => new Promise((resolve, reject) => {
const color = '#' + ('00000'+(Math.random()*(1<<24)|0).toString(16)).slice(-6);
progressElement.style.setProperty("--color", color);
const option = {timing : inOutQuad, draw, duration : sec * 1000, resolve};
animate(option);
}));
}, Promise.resolve())
});
</script>
</body>
</html>