I'm having trouble in the progress bar made in javascript, the bar is working but the problem is, when you change the tab and then back the bar is stopped and it works again, I would like to know how to make the bar continue when you change pages and then return.
function progress() {
var prg = document.getElementById('progress');
var progresso = 500;
var id = setInterval(frame, 150);
function frame() {
if (progresso == 10) {
clearInterval(id);
} else {
progresso -= 5;
if (prg.style.width = progresso + 'px' == 10 + 'px') {
alert('termino');
}
prg.style.width = progresso + 'px';
}
}
}
progress();* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background: #333;
}
.progress-bar {
width: 506px;
height: 26px;
background-color: #bbb;
border-radius: 13px;
padding: 3px;
margin: 50px auto;
}
.progress {
width: 500px;
height: 20px;
border-radius: 10px;
background-color: dodgerblue;
}<!DOCTYPE html>
<html lang="br">
<head>
<title>Progress Bar Demo</title>
<meta charset="utf-8">
</head>
<body>
<div class="progress-bar">
<div class="progress" id="progress"></div>
</div>
</body>
</html>