JSFiddle - React, Tailwind, and code Playground

HTML

<div id="progressBar">
  <div class="bar"></div>
</div>

CSS

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

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

JavaScript

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'));