JSFiddle - React, Tailwind, and code Playground

HTML

<svg class="mobile-hide ie8-hide" id="circle-fill-svg" preserveaspectratio="xMinYMin slice" version="1.1" viewbox="0 0 110.7 110.7" x="0px" y="0px"> 
  <rect class="background-rectangle" height="110.7" preserveaspectratio="xMinYMin slice" width="110.7"></rect> 
  <g> 
    <path class="outer-circle" d="M 99.8 52.3 c -1.7 -24.6 -23 -43.1 -47.6 -41.4 l 0 0.1 l -0.1 -0.1 c -23.6 1.6 -41.4 20.8 -41.4 44.4 l 0.1 0 h -0.1 c 0 1 0 2.1 0.1 3.1 c 1.7 24.6 23 43.1 47.6 41.4 C 83 98.1 101.6 76.8 99.8 52.3 Z M 55.2 55.4 l 0.1 0 l 0 -0.1 l 0 0.1 H 55.2 Z"></path> 
    <path class="inner-circle" d="M 55.4 24.5 c -17 0 -30.9 13.9 -30.9 30.9 c 0 17 13.9 30.9 30.9 30.9 c 17 0 30.9 -13.9 30.9 -30.9 C 86.2 38.3 72.4 24.5 55.4 24.5 Z" stroke-width="27.4"></path> 
    <path class="inner-circle-overlay" d="M 55.4 24.5 c -17 0 -30.9 13.9 -30.9 30.9 c 0 17 13.9 30.9 30.9 30.9 c 17 0 30.9 -13.9 30.9 -30.9 C 86.2 38.3 72.4 24.5 55.4 24.5 Z"></path> 
  </g> 
</svg>

SCSS

// svg styles

.background-rectangle {fill:#00A1DF;}
.outer-circle {fill:#5EB8E7;}
.inner-circle {
  fill: #00A1DF;
  stroke: white;
  stroke-dasharray: 215;
} 
.inner-circle-overlay{fill:#00A1DF;}

#circle-fill-svg {
  .inner-circle{
     stroke-width: 27.4;
     stroke-dashoffset: 236;
  }
}

JavaScript

var animateSvg = function() {
  setTimeout(function(){
    $('#circle-fill-svg .inner-circle').animate({'strokeDashoffset': 382});
  }, 0); 
}

animateSvg();