<p class="counter-title">Бонус и специальная цена действуют еще</p>

<div class="counter">
  <div class="counter-item">
    <div data-progress="0" class="radial-progress progress days" data-plur="день,дня,дней">
      <div class="circle-block">
        <div class="mask full">
          <div class="fill"></div>
        </div>
        <div class="mask half">
          <div class="fill"></div>
          <div class="fill fix"></div>
        </div>
      </div>
      <div class="inset">0 <span>дней</span></div>
    </div>
  </div>
  <div class="counter-item">
    <div data-progress="0" class="radial-progress progress hours" data-plur="час,часа,часов">
      <div class="circle-block">
        <div class="mask full">
          <div class="fill"></div>
        </div>
        <div class="mask half">
          <div class="fill"></div>
          <div class="fill fix"></div>
        </div>
      </div>
      <div class="inset">0 <span>часов</span></div>
    </div>
  </div>
  <div class="counter-item">
    <div data-progress="0" class="radial-progress progress minutes" data-plur="минута,минуты,минут">
      <div class="circle-block">
        <div class="mask full">
          <div class="fill"></div>
        </div>
        <div class="mask half">
          <div class="fill"></div>
          <div class="fill fix"></div>
        </div>
      </div>
      <div class="inset">0 <span>минут</span></div>
    </div>
  </div>
  <div class="counter-item">
    <div data-progress="0" class="radial-progress progress seconds" data-plur="секунда,секунды,секунд">
      <div class="circle-block">
        <div class="mask full">
          <div class="fill"></div>
        </div>
        <div class="mask half">
          <div class="fill"></div>
          <div class="fill fix"></div>
        </div>
      </div>
      <div class="inset">0 <span>секунд</span></div>
    </div>
  </div>
</div>

$brand-primary: #6e3795;
$progress-back-color: #e3e3fd;
$progress-fore-color: #d00101;
$progress-width: 12px;
$progress-size: 90px;
$progress-size-half: 45px;

.radial-progress {
    position: relative;
    margin: 0 auto;
    border-radius: 50%;
    width: 90px;
    height: 90px;
    overflow: hidden;
    box-shadow: 0 0 3px rgba(#000, 0.1);
    * { transition: none !important; }
}

.radial-progress .circle-block {
    position: relative;
    background: $progress-back-color;
    border-radius: 100%
}

.radial-progress .circle-block .fill,
.radial-progress .circle-block .mask,
.radial-progress .circle-block .shadow {
    position: absolute;
    border-radius: 50%
}

.radial-progress .circle-block .shadow {
    box-shadow: 6px 6px 10px rgba(0, 0, 0, .2) inset
}

.radial-progress .circle-block .fill,
.radial-progress .circle-block .mask {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 50%;
    transition-property: transform;
    transition-duration: .25s;
    transition-timing-function: cubic-bezier(.25, .46, .45, .94)
}

.radial-progress .circle-block .mask {
    clip: rect(0, $progress-size, $progress-size, $progress-size-half)
}

.radial-progress .circle-block .mask .fill {
    clip: rect(0, $progress-size-half, $progress-size, 0);
    background-color: $progress-fore-color;
}

.radial-progress .inset {
    position: absolute;
    background-color: #353535;
    border-radius: 50%;
    top: 0
}

@for $i from 0 through 60 {
    $angle: 180 / 60 * $i * 1deg;
    .radial-progress[data-progress="#{$i}"] .circle-block .fill,
    .radial-progress[data-progress="#{$i}"] .circle-block .mask.full {
        transform: rotate($angle);
    }
    .radial-progress[data-progress="#{$i}"] .circle-block .fill.fix {
        transform: rotate($angle * 2);
    }
    .radial-progress[data-progress="#{$i}"] .inset .percentage .numbers {
        width: 100%;
    }
}

.radial-progress,
.radial-progress .circle-block,
.radial-progress .circle-block .fill,
.radial-progress .circle-block .mask,
.radial-progress .circle-block .shadow {
    width: $progress-size;
    height: $progress-size;
}
.radial-progress .circle-block .mask {
    clip: rect(0, $progress-size, $progress-size, $progress-size-half)
}
.radial-progress .circle-block .mask .fill {
    clip: rect(0, $progress-size-half, $progress-size, 0)
}
.radial-progress .inset {
    width: ($progress-size - ($progress-width * 2));
    height: ($progress-size - ($progress-width * 2));
    margin-left: $progress-width;
    margin-top: $progress-width;
    background: #fff;
    box-shadow: 1px 1px 5px rgba(#000, 0.5);
    font-size: 26px;
    color: $brand-primary;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    line-height: 1;
    span { display: block; font-size: 10px; }
}

.counter {
    text-align: center;
    display: flex;
    justify-content: center;
    padding: 0 0 20px;
    flex-wrap: wrap;
    &-item { margin: 10px; }
}
.counter-title {
  text-align: center;
  font-size: 20px;
}


/////////////////////////////////////////

body {
  padding:30px;
}

"use strict";

function pluralize($n, $forms) {
  return $n % 10 == 1 && $n % 100 != 11
    ? $forms[0]
    : ( $n % 10 >= 2 && $n % 10 <= 4 && ( $n % 100 < 10 || $n % 100 >= 20 )
       ? $forms[1]
       : $forms[2]
      );
}

// год, мес, день, час, мин, сек
var xDate = new Date(2083, 11, 31, 23, 59, 59, 999);
// коррекция таймзоны
var offset = (-60 * 3 * 60 * 1000) - (xDate.getTimezoneOffset() * 60 * 1000);

var getTimeLeft = function () {
  var delta = xDate - (new Date()) + offset;
  if (delta < 0) {
    return {d: 0, h: 0, m: 0, s: 0};
  }
  var timeLeft = new Date(delta);
  var time = {
    d: timeLeft.getUTCDate() - 1,
    h: timeLeft.getUTCHours(),
    m: timeLeft.getUTCMinutes(),
    s: timeLeft.getUTCSeconds()
  };
  return time;
};

$('.counter').each(function () {
  var $counter = $(this),
      $d = $('.days', $counter),
      $h = $('.hours', $counter),
      $m = $('.minutes', $counter),
      $s = $('.seconds', $counter),
  rgPlural = {
    days   : $d.data('plur').split(','),
    hours  : $h.data('plur').split(','),
    minutes: $m.data('plur').split(','),
    seconds: $s.data('plur').split(',')
  };

  setInterval(function () {
    var time = getTimeLeft();

    $('.inset', $d).html(time.d+'<span>'+pluralize(time.d,rgPlural.days)+'</span>');
    $('.inset', $h).html(time.h+'<span>'+pluralize(time.h,rgPlural.hours)+'</span>');
    $('.inset', $m).html(time.m+'<span>'+pluralize(time.m,rgPlural.minutes)+'</span>');
    $('.inset', $s).html(time.s+'<span>'+pluralize(time.s,rgPlural.seconds)+'</span>');

    $d.attr('data-progress', time.d);
    $h.attr('data-progress', time.h);
    $m.attr('data-progress', time.m);
    $s.attr('data-progress', time.s);
  }, 200);
});