JSFiddle - React, Tailwind, and code Playground

by fwait

HTML

<div class="item html">
  <div class="h-center">
    <h2>0</h2>
  </div>
  <div class="h-center bottom-layer">

    <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>
</div>

CSS

.item {
  position: relative;
  width: 100%;
  height: 100%;
  top: 100px;
}

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

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

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

.h-center {
  margin: auto;
  width: 160px;
}

.bottom-layer {
  z-index: -999;
  position: absolute;
  top: 0px;
  left: 0px;
}

JavaScript

var time = 10;
var initialOffset = '440';
var i = 1

/* Need initial run as interval hasn't yet occured... */
$('.circle_animation').css('stroke-dashoffset', initialOffset - (1 * (initialOffset / time)));

var interval = setInterval(function() {
  $('h2').text(i);
  if (i == time) {
    clearInterval(interval);
    return;
  }
  $('.circle_animation').css('stroke-dashoffset', initialOffset - ((i + 1) * (initialOffset / time)));
  i++;
}, 1000);