title: HTML/Javascript reverse progress bar with countdown date
body: <p>I can't seem to find something that creates a progress bar emptying while it comes close to the countdown date.</p>
  
  <p>I found two separate examples that could be combined but I don't know how to:<br>
  <strong>Countdown</strong> - <a href="https://www.jqueryscript.net/time-clock/Minimal-jQuery-Any-Date-Countdown-Timer-Plugin-countdown.html" rel="nofollow noreferrer">https://www.jqueryscript.net/time-clock/Minimal-jQuery-Any-Date-Countdown-Timer-Plugin-countdown.html</a> (1st example, SIMPLE TEXT COUNTDOWN)<br>
  <strong>Progress bar</strong> - <a href="https://jsfiddle.net/zessx/4PKEB/1/" rel="nofollow noreferrer">https://jsfiddle.net/zessx/4PKEB/1/</a>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function() {    
  function progress(timeleft, timetotal, $element) {
   var progressBarWidth = (timeleft / timetotal) * $element.width();
      $element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear').html(timeleft + " seconds to go");
      if(timeleft &gt; 0) {
          setTimeout(function() {
              progress(timeleft - 1, timetotal, $element);
          }, 1000);
      }
  };
  progress(20, 20, $('#progressBar'));
  });
  &lt;/script&gt;
  
  &lt;style&gt;
  #progressBar {
      width: 90%;
      margin: 10px auto;
      height: 22px;
      background-color: #0A5F44;
  }
  
  #progressBar div {
      height: 100%;
      text-align: right;
      padding: 0;
      line-height: 22px; /* same as #progressBar height if we want text middle aligned */
      width: 0;
      background-color: #CBEA00;
      box-sizing: border-box;
  }
  &lt;/style&gt;
  
  &lt;div id="progressBar"&gt;
      &lt;div&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>UPDATE QUESTION</strong><br>
  Let me explain a little more what i need.<br>
  I need to combine the code from both links and get something like this:<br>
  <a href="https://i.stack.imgur.com/tEUzG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tEUzG.png" alt="enter image description here"></a><br>
  So what I finally need is to have the countdown text (circled in blue), to actually correspond to the decreasing color (circled in red) in the progress bar.<br>
  In few words I want a progress bar with text in it counting days, hours, minutes, seconds upto a specific date not for a specific amount of time.</p>
  
  <p>My entire html is: </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;jQuery Countdown Plugin Examples&lt;/title&gt;
  
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://www.jqueryscript.net/demo/Minimal-jQuery-Any-Date-Countdown-Timer-Plugin-countdown/dest/jquery.countdown.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(function() {
      var endDate = "December 31, 2088 23:59:59";
  
      $('.countdown.simple').countdown({ date: endDate });
  
      // End time for diff purposes
      var endTimeDiff = new Date().getTime() + 15000;
      // This is server's time
      var timeThere = new Date();
      // This is client's time (delayed)
      var timeHere = new Date(timeThere.getTime() - 5434);
      // Get the difference between client time and server time
      var diff_ms = timeHere.getTime() - timeThere.getTime();
      // Get the rounded difference in seconds
      var diff_s = diff_ms / 1000 | 0;
  });
  
  $(document).ready(function() {
      function progress(timeleft, timetotal, $element) {
          //var progressBarWidth = timeleft * $element.width() / timetotal;
          var progressBarWidth = (timeleft / timetotal) * $element.width();
          $element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear');
          if(timeleft &gt; 0) {
              setTimeout(function() {
                  progress(timeleft - 1, timetotal, $element);
              }, 1000);
          }
      };
      progress(20, 20, $('#progressBar'));
  });
  &lt;/script&gt;
  
  &lt;style&gt;
  body {
      font: 13px/1.4 'Helvetica Neue', 'Helvetica','Arial', sans-serif;
      color: #333;
  }
  .container {
      width: 520px;
      margin: auto;
  }
  h1 {
      border-bottom: 1px solid #d9d9d9;
  }
  h2{
      position: relative;;
      font-size: 16px;
      font-weight: normal;
      text-transform: uppercase;
  }
  h2:before{
      content: '\2192';
      position: absolute;
      left: -20px;
      font-size: 0.9em;
  }
  a {
      color: #be2221;
      text-decoration: none;
  }
  
  .simple {
      font-size: 20px;
      background: #27ae60;
      padding: 0.5em 0.7em;
      color: #ecf0f1;
      margin-bottom: 50px;
      -webkit-transition: background 0.5s ease-out;
      transition: background 0.5s ease-out;
  }
  .simple {
      margin-bottom: 50px;
  }
  .simple div {
      display: inline-block;
      margin-left: 10px;
      font-size: 30px;
      font-weight: 100;
      line-height: 1;
      text-align: right;
  }
  /* IE7 inline-block hack */
  *+html .simple div {
      display: inline;
      zoom: 1;
  }
  .simple div:first-child {
      margin-left: 0;
  }
  .simple div span {
      display: block;
      border-top: 1px solid #cecece;
      padding-top: 3px;
      font-size: 12px;
      font-weight: normal;
      text-transform: uppercase;
      text-align: left;
  }
  
  #progressBar {
      width: 90%;
      margin: 10px auto;
      height: 22px;
      background-color: #fff;
      border:1px solid #ddd;
  }
  #progressBar div {
      height: 100%;
      text-align: right;
      line-height: 22px; /* same as #progressBar height if we want text middle aligned */
      width: 0;
      background-color: #CBEA00;
      box-sizing: border-box;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="container" style="margin-top:50px;"&gt;
      &lt;h2&gt;Simple text countdown&lt;/h2&gt;
      &lt;div class="countdown simple" data-date="December 31, 2018 23:59:59"&gt;&lt;/div&gt;
  
      &lt;div id="progressBar"&gt;
          &lt;div&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any help will be appreciated!!</p>