NellDenZ,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.progress_bar {
position: relative;
width: 200px;
height: 5px;
background: silver;
}
.progress {
height: 5px;
background: green;
}
.hide{
display: none;
}
</style>
</head>
<body>
<script> var id,width = 1;
function move() {
end();
var elem = document.getElementById("bar");
elem.parentNode.classList.remove("hide");
id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
width = 1;
} else {
width++;
elem.style.width = width + '%';
}
}
}
function end()
{
window.clearInterval(id);
var elem = document.getElementById("bar");
elem.parentNode.classList.add("hide");
}
</script>
<div class="progress_bar">
<div class="progress" id="bar" style="width: 0px;"></div>
</div>
<br>
<input type="button" value="start" onClick="move()">
<input type="button" value="stop" onClick="end()">
</body>
</html>