JS and HTML5: Countdown Bar only works "on screen"

Question

I’m implementing a small progress bar (.progressbar) that actually works as a "countdown bar" (it’s an inverted progress bar, it starts full and goes down) and will work as a session expiration control (at the end of the time - JS does the page re-load and as the session will be expired it is blocked)

the session control is working OK - which is the most important - but a problem has disturbed me - the animation of the bar is not correctly following the time - IF THE USER DOES NOT STAY ON THE SCREEN (q is one of the reasons to implement this - if the user "forget the open window" - the system takes care to close it alone so as not to expose the data - even if another user does not have to "access" the system since the session has already crashed - he would still have time to "see the exposed data" - until the timer completes.

would be some problem in the code or is something from the browser (I have not yet made larger tests - I just implemented - I only used it in Chrome "last version")

Thank you!

follows the JSFIDDLE: https://jsfiddle.net/2tonbd5k/

*I did not put the page Load line there not to give the Load in jsfiddle - but in the page this ok - the question is the animation of the bar that stops when we change the page on the screen (we open see the material and we go to another tab) - the animation seems to (and while she doesn’t "Zera" she also doesn’t activate the Reload).

function progress(timeleft, timetotal, $element) {
  var progressBarWidth = timeleft * $element.width() / timetotal;
  $element.find('div').animate({
    width: progressBarWidth
  }, timeleft == timetotal ? 0 : 1000, "linear");
  if (timeleft > 0) {
    setTimeout(function() {
      progress(timeleft - 1, timetotal, $element);
    }, 1000);
  }
};

progress(25, 25, $('#progressBar'));

#progressBar {
  width: 90%;
  margin: 10px auto;
  height: 2px;
  background-color: #E0E0E0;
}

#progressBar div {
  height: 100%;
  text-align: right;
  padding: 0 0px;
  line-height: 2px;
  width: 0;
  background-color: #FF0000;
  box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="progressBar">
  <div class="bar"></div>
</div>

Answer 1

I put a numeric timer on the bar just to make it easier to check that the time is really reduced - but I will at least remove this inhibiting the line

progressBar.innerHTML = `${timeleft} seg`;

to redirect (and log off the page) - you must call the line, taking out the "/" and changing the ADDRESS to the redirect address:

// window.location.replace("ENDEREÇO");

and I will reduce the height of the bar to 2px - to be "thin" as in the original example. but the solution is this!!

const progressBar = document.querySelector('#progressBar .bar');
function progress(startTime, timetotal) {
    const timeleft = timetotal + (startTime - Date.now()) / 1000 | 0;
  if (timeleft > 0) {
    const progressBarWidth = timeleft * 100 / timetotal;
    progressBar.innerHTML = `${timeleft} seg`;
    progressBar.style.width = `${progressBarWidth}%`;
    setTimeout(progress, 1000, startTime, timetotal);
  } else {
    progressBar.innerHTML = ``;
    progressBar.style.width = "0";
    // window.location.replace("ENDEREÇO");
  }
}

progress(Date.now(), 180);

#progressBar {
  width: 90%;
  margin: 10px auto;
  height: 22px;
  background-color: #E0E0E0;
}

#progressBar div {
  transition: width 1s;
  height: 100%;
  width: 100%;
  text-align: right;
  padding: 0 0px;
  line-height: 22px; /* same as #progressBar height if we want text middle aligned */
  width: 0;
  background-color: #FF0000;
  box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="progressBar">
  <div class="bar"></div>
</div>