Как создать круговой таймер обратного отсчета с использованием HTML, CSS или JavaScript?

В настоящее время я работаю над викториной, и в этом случае для каждого вопроса я хочу поставить таймер обратного отсчета. У меня есть плагины, но я хочу, чтобы я мог сам создать его. То, что я пытаюсь создать, выглядит так, как показано на рисунке ниже. Можете ли вы рассказать мне, как я могу это сделать?

Есть ли способ назначить границу только до определенного процента периметра, чтобы я мог сначала дать границу, а затем по мере продвижения каждой секунды я могу продолжать уменьшать/увеличивать ее, чтобы Я бы понял это наилучшим образом.

Таймер, который я хочу создать, должен выглядеть примерно так (надеюсь, вы поймете, как его синяя граница будет увеличиваться каждую секунду):

Ответ 1

Вот что я играл с ним некоторое время назад. Он использует комбинацию SVG, css-переходов и javascript. Вы должны иметь возможность разрывать его и использовать в качестве отправной точки...

var time = 10; /* how long the timer runs for */
var initialOffset = '440';
var i = 1
var interval = setInterval(function() {
    $('.circle_animation').css('stroke-dashoffset', initialOffset-(i*(initialOffset/time)));
    $('h2').text(i);
    if (i == time) {
        clearInterval(interval);
    }
    i++;  
}, 1000);

.item {
    position: relative;
    float: left;
}

.item h2 {
    text-align:center;
    position: absolute;
    line-height: 125px;
    width: 100%;
}

svg {
   -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.circle_animation {
  stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 440;
  transition: all 1s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="item html">
    <h2>0</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
     </g>
    </svg>
</div>

Ответ 2

вы должны посмотреть на jQuery плагин Knob https://github.com/aterrien/jQuery-Knob, сгенерированный круглый вход холста и установить поведение таймера как:

var time = 0,
    maxTime = 60;
$('#dial').knob({
  readOnly : true,
  thickness : 0.1,
  max : maxTime
});


setInterval(function() {
  if(time>maxTime) time = 0;
  time++;
  $('#dial')
        .val(time)
        .trigger('change');
}, 1000);

Я сделал код здесь: http://codepen.io/pik_at/pen/azeYRg