JSFiddle - React, Tailwind, and code Playground

by tiger

HTML

<div class="item">
    <div class="timer-time">10</div>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Pie Timer</title>
      <circle id="circle" class="timer-circle" r="40" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
     </g>
    </svg>
</div>

CSS

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

.timer-time {
    text-align:center;
    position: absolute;
    line-height: 4em;
    width: 100%;
    font-size:2.5em;
    opacity:0;
}

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

.timer-circle {
  stroke-dasharray: 280; 
  stroke-dashoffset: 280;
  transition: all 1s linear;
}

@keyframes letter-shine-even{
  0%   { opacity: 0 ;  }
  50%  { opacity: 1 ; transform: scale(1.5); }
  100% { opacity: 0 ; } 
  }

@keyframes letter-shine-odd{
  0%   { opacity: 0 ; }
  50%  { opacity: 1 ; transform: scale(1.5); }
  100% { opacity: 0 ; } 
  }

JavaScript

var time = 10; 
var initialOffset = '280';
var i = 1
var interval = setInterval(function() {
    $('.timer-circle').css('stroke-dashoffset', initialOffset-(i*(initialOffset/time)));
    $('.timer-time').text(10-i);
    if (i == time) { i=1 ; }
    i++; 
    
  if( i%2 ==0 ){
    $(".timer-time").css("animation","letter-shine-even 1s");
  } else {
    $(".timer-time").css("animation","letter-shine-odd 1s");
  }
  
}, 1000);