title: Link Progress bar to days/time remaining countdown
body: <p>I am building a deal page with countdown timer to show how much time is remaining to claim the offer. I have the countdown timer working to show how many days, hours, minutes and seconds are left, but would like to have a visual progress bar under the time that fills up based on the days left.</p>
  
  <p>For example, the offer goes live July 1 and expires July 31. If the user loads the page on July 1, the progress bar would be at 0%. On July 31, the progress bar would be set to 100%.</p>
  
  <p>I am currently using the progress bar styling and HTML code used by Bootstrap 3.</p>
  
  <p>I've been trying to the width style property for "progress-bar" to the days remaining, but have not been able to get them to link up</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-js lang-js prettyprint-override"><code>function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
   var seconds = Math.floor((t / 1000) % 60);
   var minutes = Math.floor((t / 1000 / 60) % 60);
   var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
   var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
   'days': days,
   'hours': hours,
   'minutes': minutes,
   'seconds': seconds
   };
   }
   
  function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
   var daysSpan = clock.querySelector('.days');
   var hoursSpan = clock.querySelector('.hours');
   var minutesSpan = clock.querySelector('.minutes');
   var secondsSpan = clock.querySelector('.seconds');
   
  function updateClock() {
  var t = getTimeRemaining(endtime);
   
   daysSpan.innerHTML = t.days;
   hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
   minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
   secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
  
  if (t.total &lt;= 0) {clearInterval(timeinterval); } } updateClock(); var timeinterval=setInterval(updateClock, 1000); } var deadline=new Date("july 31, 2019 23:59:59"); initializeClock('clockdiv', deadline);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div id="clockdiv" style="font-weight:600;text-transform: uppercase"&gt;Time Remaining:&lt;span class="days"&gt;&lt;/span&gt;:&lt;span class="hours"&gt;&lt;/span&gt;:&lt;span class="minutes"&gt;&lt;/span&gt;:&lt;span class="seconds"&gt;&lt;/span&gt;&lt;/div&gt;
    &lt;div class="progress" style="margin-bottom:8px;border-radius: 4px"&gt;
     &lt;div class="progress-bar progress-bar-striped active" style="width:%;border-radius: 4px"&gt;
     &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>