JSFiddle - React, Tailwind, and code Playground

by abhiklpm

HTML

<div class="progress">
  <div class="bar"></div>
</div><p id="demo"></p>

CSS

.progress {
  width: 500px;
  height: 5px;
  background: #ccc;
}

.bar {
  background: red;
  width: 50%;
  height: 100%;
}

JavaScript

var progress = function(options) {
  var tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);

  var defaults = {
    fromDate: tomorrow.getTime(),
    toDate: new Date().getTime()
  };
  $.extend({}, defaults, options);

  this.countDown = function() {
    var distance = defaults.fromDate - new Date().getTime();
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
  };
  setInterval(function() {
      this.countDown();
    }, 1000)
    //console.log(tomorrow.getTime(), defaults)
};

progress({});