Countdown Radial

Countdown radial

Basic markup for current countdown:

<div class="wrap-radial-countdown" data-countdown="" data-from="2017-08-19T20:00:00" data-to="2017-09-20T20:30:00">
  <div class="progress-circle" data-circle-countdown="data-circle-countdown" data-units="Days">
    <svg x="0px" y="0px" width="200px" height="200px" viewbox="0 0 100 100">
      <clippath class="progress-clip">
        <path d=""></path>
      </clippath>
      <circle class="circle-bg" cx="50" cy="50" r="50"></circle>
      <circle class="progress clipped" cx="50" cy="50" r="50"></circle>
    </svg>
    <div class="countdown-counter"></div>
  </div>
</div>

Countdown gradient

Basic markup for current countdown:

<div class="wrap-radial-countdown" data-countdown="" data-from="2017-08-19T20:00:00" data-to="2018-04-20T20:30:00">
  <svg class="countdown-gradient" x="0px" y="0px" width="0" height="0" viewbox="0 0 0 0">
    <defs>
      <lineargradient id="Gradient1">
        <stop class="stop-color-1" offset="0%"></stop>
        <stop class="stop-color-2" offset="80%"> </stop>
      </lineargradient>
    </defs>
  </svg>
  <div class="progress-circle" data-circle-countdown="data-circle-countdown" data-units="Days">
    <svg x="0px" y="0px" width="200px" height="200px" viewbox="0 0 100 100">
      <clippath class="progress-clip">
        <path d=""></path>
      </clippath>
      <circle class="circle-bg" cx="50" cy="50" r="45"> </circle>
      <circle class="progress-gradient clipped" cx="50" cy="50" r="50"></circle>
    </svg>
    <div class="countdown-counter"></div>
  </div>
</div>

Countdown radial gradient

Days
Hours
Minutes
Seconds

Basic markup for current countdown:

<div class="wrap-radial-countdown" data-countdown="" data-from="2017-08-19T20:00:00" data-to="2018-04-20T20:30:00">
  <svg class="countdown-gradient" x="0px" y="0px" width="0" height="0" viewbox="0 0 0 0">
    <defs>
      <lineargradient id="Gradient2">
        <stop class="stop-color-1" offset="0%"></stop>
        <stop class="stop-color-2" offset="80%"></stop>
      </lineargradient>
    </defs>
  </svg>
  <div class="progress-circle progress-circle-radial" data-circle-countdown="data-circle-countdown" data-units="Days">
    <svg x="0px" y="0px" width="200px" height="200px" viewbox="0 0 100 100">
      <clippath class="progress-clip">
        <path d=""></path>
      </clippath>
      <circle class="circle-stroke" cx="50" cy="50" r="45"></circle>
      <circle class="circle-bg" cx="50" cy="50" r="38"></circle>
      <circle class="progress-gradient-radial clipped" cx="50" cy="50" r="45"></circle>
    </svg>
    <div class="progress-counter-wrap">
      <div class="countdown-counter"></div>
      <div class="countdown-title">Days</div>
    </div>
  </div>
</div>

Countdown radial classic

Days
Hours
Minutes
Seconds

Basic markup for current countdown:

<div class="wrap-radial-countdown" data-countdown="" data-from="2017-08-19T20:00:00" data-to="2018-04-20T20:30:00">
  <div class="progress-circle progress-circle-radial" data-circle-countdown="data-circle-countdown" data-units="Days">
    <svg x="0px" y="0px" width="200px" height="200px" viewbox="0 0 100 100">
      <clippath class="progress-clip">
        <path d=""></path>
      </clippath>
      <circle class="circle-stroke" cx="50" cy="50" r="45"></circle>
      <circle class="progress clipped" cx="50" cy="50" r="45"></circle>
    </svg>
    <div class="progress-counter-wrap">
      <div class="countdown-counter"></div>
      <div class="countdown-title">Days</div>
    </div>
  </div>
</div>