progress bar for execution when changing tab in javascript

Asked

Viewed 42 times

1

I have problem in the progress bar done in javascript, the bar is working but the problem is, when you change tab and then back the bar is stopped and back to work, I would like to know how to make the bar continue running when changing 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>

javascript
No answers

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.