<div class="container">
  <h2>Basic Progress Bar</h2>
<div class="row">
  <div class="left-of col-md-1 col-sm-1 col-xs-2">0:00</div>
  <div class="progress col-md-4 col-sm-4 col-xs-8">
    <div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%"></div>
    <div class="progress-right"></div></div>
  <div class="right-of col-md-1 col-sm-1 col-xs-2">90:00</div>
</div>
</div>
div.progress {
  padding: 0px;
}
div.progress-bar-striped:first-child {
  animation-direction: reverse;
}
div.progress-bar {
  text-align: right;
  padding: 0px 5px 0px 0px;
  margin: 0px 5px 0px 0px;
}
div.progress-right {
  padding: 2px 0px 0px 0px;
  color: rgb(150, 150, 150);
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 13px;
}
.left-of {
  text-align: right;
  padding: 0px 5px;
}
.right-of {
  padding: 0px 5px;
}
.rainbow:first-child {
  animation-play-state:running;
-webkit-animation:progress-bar-stripes 2s linear infinite, rainbow 1s infinite;
-o-animation:progress-bar-stripes 2s linear infinite, rainbow 1s infinite;
animation:progress-bar-stripes 2s linear infinite, rainbow 1s infinite;
}
@-webkit-keyframes rainbow {
0% {background-color: #ff0000;}
10% {background-color: #ff8000;}
20% {background-color: #ffff00;}
30% {background-color: #80ff00;}
40% {background-color: #00ff00;}
50% {background-color: #00ff80;}
60% {background-color: #00ffff;}
70% {background-color: #0080ff;}
80% {background-color: #0000ff;}
90% {background-color: #8000ff;}
100% {background-color: #ff0080;}
}
@-ms-keyframes rainbow {
0% {background-color: #ff0000;}
10% {background-color: #ff8000;}
20% {background-color: #ffff00;}
30% {background-color: #80ff00;}
40% {background-color: #00ff00;}
50% {background-color: #00ff80;}
60% {background-color: #00ffff;}
70% {background-color: #0080ff;}
80% {background-color: #0000ff;}
90% {background-color: #8000ff;}
100% {background-color: #ff0080;}
}
@-o-keyframes rainbow {
0% {background-color: #ff0000;}
10% {background-color: #ff8000;}
20% {background-color: #ffff00;}
30% {background-color: #80ff00;}
40% {background-color: #00ff00;}
50% {background-color: #00ff80;}
60% {background-color: #00ffff;}
70% {background-color: #0080ff;}
80% {background-color: #0000ff;}
90% {background-color: #8000ff;}
100% {background-color: #ff0080;}
}
@keyframes rainbow {
0% {background-color: #ff0000;}
10% {background-color: #ff8000;}
20% {background-color: #ffff00;}
30% {background-color: #80ff00;}
40% {background-color: #00ff00;}
50% {background-color: #00ff80;}
60% {background-color: #00ffff;}
70% {background-color: #0080ff;}
80% {background-color: #0000ff;}
90% {background-color: #8000ff;}
100% {background-color: #ff0080;}
}
function pad(num, size) {
    var s = num+"";
    while (s.length < size) s = "0" + s;
    return s;
}
function progress(p) {
  var done = false
  if (p >= 1) {
    $(".progress-bar").addClass("rainbow")
    p = 1 - (p-1)*3
    done = true
  } else {
    $(".progress-bar").removeClass("rainbow")
    $(".progress-bar").removeClass("progress-bar-success")
    $(".progress-bar").removeClass("progress-bar-warning")
    $(".progress-bar").removeClass("progress-bar-danger")
    if (p < 1/3)
      $(".progress-bar").addClass("progress-bar-danger")
    else if (p < 2/3)
      $(".progress-bar").addClass("progress-bar-warning")
    else
      $(".progress-bar").addClass("progress-bar-success")
  }
  
  var lengthInS = done ? 30*60 : 90 * 60;
  
  if (p > 1) p = 1
  var t = Math.floor(p*lengthInS)
  $(".left-of").html(Math.floor(t / 60) + ":" + pad(t % 60, 2))
  t = Math.ceil((1-p)*lengthInS)
  $(".right-of").html(Math.floor(t / 60) + ":" + pad(t % 60, 2))
  
  
  
  p = Math.floor(p*100)
  if (p < 10) {
    $('.progress-right').html(p + "%")
    $('.progress-bar').html("")
  } else {
    $('.progress-bar').html(p + "%")
    $('.progress-right').html("")
  }
  $('.progress-bar').attr("aria-valuenow", p)
  $('.progress-bar').css("width", p + "%")
  
}

var timestart;

$(document).ready(function() {
    timestart = new Date();
    setInterval(function () {      
      var currentdate = new Date();
      
      var t = currentdate.getHours() - 8;
      t *= 60;
      t += currentdate.getMinutes() - 15;
      t *= 60;
      t += currentdate.getSeconds();
      t *= 1000;
      t += currentdate.getMilliseconds();
      
      
      if (t < 0 || t > (12 * 60 - 15) * 60 * 1000)
      {
        progress(0);
      } else {
        t = t % (120 * 60 * 1000);
        progress(t / 90 / 60 / 1000);
      }
    }, 100);
      
});

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
  2. https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
  2. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js