Таймер обратного отсчета с круглым индикатором выполнения
Я создал таймер обратного отсчета. Я получил границу, которая сделана круглой. Поскольку таймер стремится к нулю, круговая граница должна менять цвет с уменьшением в секундах.
HTML
<div class="outer">
<button class="btn btn-default btn-timer">0.00</button>
</div>
JS CODE
var displayminutes;
var displayseconds;
var initializeTimer = 1.5 // enter in minutes
var minutesToSeconds = initializeTimer*60;
$("#document").ready(function(){
setTime = getTime();
$(".btn-timer").html(setTime[0]+":"+setTime[1])
});
$(".btn-timer").click(function(){
var startCountDownTimer = setInterval(function(){
minutesToSeconds = minutesToSeconds-1;
var timer = getTime();
$(".btn-timer").html(timer[0]+":"+timer[1]);
if(minutesToSeconds == 0){
clearInterval(startCountDownTimer);
console.log("completed");
}
},1000)
});
function getTime(){
displayminutes = Math.floor(minutesToSeconds/60);
displayseconds = minutesToSeconds - (displayminutes*60);
if(displayseconds < 10)
{
displayseconds ="0"+displayseconds;
}
if(displayminutes < 10)
{
displayminutes = "0"+displayminutes;
}
return [displayminutes, displayseconds];
}
Как получить круговой индикатор выполнения. Я искал несколько плагинов jQuery, но они не соответствуют моим требованиям. Я ищу выход, похожийна эту ссылку