JSFiddle - React, Tailwind, and code Playground

HTML

<div class="progressWrapper">
  <progress id="bar" value="0" max="1000" min="0"></progress>
</div>

<fieldset>
  Time (msec): <input type="text" value="5000" id="time">

  <button id ="start">start</button>
  <button id ="stop">stop</button>
</fieldset>

CSS

.progressWrapper {
  width: 100%;
}

progress {
  /* Turn off default styling. */
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border: 0;

  height: 10px;
  width: 100%;
  color: red;    /* IE */
  background: navy;     /* Firefox */
}

/* Chrome needs '-webkit-progress-value' and '-webkit-progress-bar' attributes. */
progress::-webkit-progress-value {
  background: red;
}

progress::-webkit-progress-bar {
  background: navy;
}

/* Firefox needs only '-moz-progress-bar' attiribute. */
progress::-moz-progress-bar {
  background: red;
}

JavaScript

var timer,
  limitMs = 0,
  restMs = 0,
  resolutionMs = 50,    /* NOTE: Too small value does not work on IE11. */
  maxBar;

var countdown = function() {
  restMs -= resolutionMs;

  var restRate = (limitMs - restMs) / limitMs;
  var restBarLength = maxBar * restRate

  $('#bar').attr('value', restBarLength);

  if (restMs < 0) {
    resetTimer();
    alert('time expired');
  }
};

var resetTimer = function() {
  clearInterval(timer);
  limitMs = restMs = $('#time').val();
  $('#bar').attr('value', 0);
};

$(function() {
  maxBar = $('#bar').attr('max');

  $('#start').on('click', function() {
    resetTimer();
    timer = setInterval('countdown()', resolutionMs);
  });

  $('#stop').on('click', function() {
    resetTimer();
  });
});