JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="item html">
      <h2>0</h2>
      <svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
             <g>
              <title>Layer 1</title>
              <circle id="circle" class="circle_animation" r="139.7139" cy="162" cx="162" stroke-width="8" stroke="#6fdb6f" fill="none"/>
             </g>
            </svg>
    </div>

CSS

.item {
          position: relative;
          float: left;
        }
    
        .item h2 {
          text-align: center;
          position: absolute;
          line-height: 250px;
          width: 100%;
        }
    
        svg {
          -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
        }
    
        .circle_animation {
          stroke-dasharray: 880;
          /* this value is the pixel circumference of the circle */
          stroke-dashoffset: 880;
          transition: all 1s linear;
        }

JavaScript

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