title: How to design timer circle fill out with color(ex. Red)? Color fill out process depand on day, hour, min & sec
body: <p>I don't need static images in the background. I need like this <a href="http://www.jqueryscript.net/demo/Attractive-jQuery-Circular-Countdown-Timer-Plugin-TimeCircles/" rel="nofollow noreferrer">http://www.jqueryscript.net/demo/Attractive-jQuery-Circular-Countdown-Timer-Plugin-TimeCircles/</a>
  This is good but the design does not change as per my requirement. I need a shadow effect in the design.
  <a href="https://i.stack.imgur.com/i2JDX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i2JDX.png" alt="I need this type timer."></a></p>
  
  <p><strong>My code is here.</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <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 = '2017-04-18';
  initializeClock('clockdiv', deadline);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.width80 {
    width: 100%;
    float: left;
  }
  .width25 {
    width: 25%;
    float: left;
    padding: 0 10px;
    position: relative;
    text-align: center;
  }
  .timer_img {
    max-width: 100%;
    width: 162px;
  }
  .detail {
    position: absolute;
    width: 100%;
    top: 25%;
    text-align: center;
    left: 0;
  }
  .detail .value {
    display: inline-block;
    width: 100%;
    font-family: MyriadPro-Bold !important;
    font-size: 27px;
    color: #6a7090;
  }
  #clockdiv {
    display: inline-block;
    width: 100%;
    margin: 80px 0 50px;
  }
  .detail .title {
    font-family: MyriadPro-Bold !important;
    font-size: 14px;
    color: #6a7090;
    text-transform: uppercase;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="clockdiv" class="time"&gt;
    &lt;div class="width80"&gt;
      &lt;div class="width25 timer_01"&gt;
        &lt;img src="http://res.cloudinary.com/hitraiyani/image/upload/v1482302660/timer_01_fzodnv.png" class="timer_img"&gt;
        &lt;div class="detail"&gt;&lt;span class="value days"&gt;00&lt;/span&gt;
          &lt;span class="title"&gt;Days&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="width25 timer_02"&gt;
        &lt;img src="http://res.cloudinary.com/hitraiyani/image/upload/v1482302669/timer_02_pme7wt.png" class="timer_img"&gt;
        &lt;div class="detail"&gt;&lt;span class="value hours"&gt;00&lt;/span&gt;
          &lt;span class="title"&gt;Hours&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="width25 timer_03"&gt;
        &lt;img src="http://res.cloudinary.com/hitraiyani/image/upload/v1482302666/timer_03_zrhjwk.png" class="timer_img"&gt;
        &lt;div class="detail"&gt;&lt;span class="value minutes"&gt;00&lt;/span&gt;
          &lt;span class="title"&gt;Minutes&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="width25 timer_04"&gt;
        &lt;img src="http://res.cloudinary.com/hitraiyani/image/upload/v1482302667/timer_04_h0gk94.png" class="timer_img"&gt;
        &lt;div class="detail"&gt;&lt;span class="value seconds"&gt;00&lt;/span&gt;
          &lt;span class="title"&gt;Seconds&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>