JSFiddle - React, Tailwind, and code Playground

by mkurzweil

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<pie class="spinner-outer"></pie>
<div id="timer" class="time-left"></div>
<pie class="spinner-outer"></pie>

CSS

pie{
  background: #5A5A5A;
  border: 4px solid #CCCCCC;
}

.spinner-outer{
    width: 62%;
    height: 65%;
    border-radius: 50%;
    position: absolute;
    overflow: hidden;
    bottom: 0;
    left: 19%;
    background-image: linear-gradient(90deg, transparent 50%, #CCCCCC 50%), linear-gradient(90deg, #CCCCCC 50%, transparent 50%);
  }

JavaScript

var transformVal = -90; //starting point is 90 degree
var transformPerSecond = 1;
var spinnerInterval;
var passedTime = 0;
var secondscounter = 0;
var minutescounter =0;
var expire = 20;
var creationInterval = expire/360;
var flag = false;
var spinnerCounter = 0;
var minutes, seconds =0;
var countIntervall =0;

var changeDegreeValue = false;
spinnerInterval = setInterval(function(){
 if(passedTime < expire){
  if(spinnerCounter==2){
   if(transformVal >= 90){
    if(changeDegreeValue == false){
     transformVal = 270;
     changeDegreeValue= true;
    }
    $('.spinner-outer').css("background-image","linear-gradient(" + transformVal +"deg, #5A5A5A 50%, transparent 50%)," +
    "linear-gradient(" + 90 +"deg, #CCCCCC 50%, transparent 50%)")                           
   }else{
    $('.spinner-outer').css("background-image","linear-gradient(" + transformVal +"deg, #CCCCCC 50%, transparent 50%)," +
    "linear-gradient(" + 90 +"deg, #CCCCCC 50%, transparent 50%)");
   }
   transformVal += transformPerSecond;
   passedTime += creationInterval;
  } else{
   spinnerCounter++;
  }
  
  if(flag ==false){
   minutes = Math.floor(expire / 60);
   seconds = expire - minutes * 60;
   secondscounter = seconds;
   minutescounter = minutes;
   flag = true;
  }
  if(countIntervall > 1000){
   if(flag== true){
    if(secondscounter>0){
     secondscounter--;
    } else{
     secondscounter = 59;
     minutescounter--;
     if(minutescounter == -1){
     	secondscounter = 0;
      minutescounter = 0;
     }
    }
    seconds = secondscounter;
    minutes = minutescounter;
   }
   minutes = (minutes<10 ? "0" : "") + minutes;
   seconds = (seconds<10 ? "0" : "") + seconds;
   var timeLeft =minutes +":"+seconds;
   $('#timer').text(timeLeft);
   countIntervall=0;
   countIntervall+= (expire/360)*1100;
    } else{
     countIntervall+= (expire/360)*1100;
    }
  }else{
    $('#timer').text('00:00');
    clearInterval(spinnerInterval);
  }
},(expire/360)*1000);