Prosty przykład:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Progress bar example</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js'></script>
</head>
<body>
<div id='out'>
<div id='in'></div>
</div>
<button onclick='move();'>start</button>
</body>
</html>
Masz w nim 2 divy jeden "zewnętrzny" - reprezentujący cały pasek i drugi "wewnętrzny" w środku, który będzie przedstawiał zapełnianie, do tego przycisk do odpalenia funkcji.
main.css
#out {
background-color: grey;
height: 30px;
width: 100%;
}
#in {
width: 0%;
height: 30px;
background-color: green;
}
Tam są style dla zewnętrznego całego paska i wewnętrznego paska przedstawiającego zapełnienie, paski są różnych kolorach, są tej samej wysokości i zewnętrzny jest pełny (100%) wewnętrzny ma 0% (przedstawia początkowe zapełnienie)
main.js
function move() {
const progress = document.querySelector('#in');
let width = 1;
const id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
if(width >=80){
progress.style.backgroundColor = 'red';
}
width++;
progress.style.width = width + '%';
}
}
}
Funkcja zapełniająca pasek, pobiera element wewnętrzny (zapełnienie), i uruchamia funkcje frame("klatka") co 10ms. W funkcji frame masz zwiększanie szerokości wewnętrznego paska o 1% oraz sprawdzanie - przy 100% funkcja się zatrzyma przy 80 kolor zapełnienia zmieni się na czerwony. Funkcje mogą się nazywać inaczej oczywiście.