Creé un temporizador de cuenta regresiva. Tengo un borde que se hace circular. Como el temporizador tiende a cero, el borde circular debería cambiar de color con disminución en los segundos.

Creé el JSFIDDLE

HTML

<div class="outer">
    <button class="btn btn-default btn-timer">0.00</button>
</div>

CÓDIGO JS

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];
}

¿Cómo puedo obtener una barra de progreso circular? Busqué algún complemento jQuery pero no coinciden con mis requisitos. Estoy buscando una salida similara este enlace