JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="animated" viewbox="0 0 100 100">
                  <circle cx="50" cy="50" r="45" fill="#FDB900"/>
                  <path fill="none" stroke-linecap="round" stroke-width="5" stroke="#fff"
                        stroke-dasharray="251.2,0"
                        d="M50 10
                           a 40 40 0 0 1 0 80
                           a 40 40 0 0 1 0 -80">
                    <animate attributeName="stroke-dasharray" from="0,251.2" to="251.2,0" dur="5s"/>           
                  </path>
                  <text id="count" x="50" y="50" text-anchor="middle" dy="7" font-size="20">100%</text>
                  </svg>

CSS

body{text-align:center;font-family: 'Open Sans', sans-serif;}
svg{width:30%;}

JavaScript

var count = $(('#count'));
                  $({ Counter: 0 }).animate({ Counter: count.text() }, {
                    duration: 5000,
                    easing: 'linear',
                    step: function () {
                      count.text(Math.ceil(this.Counter)+ "%");
                    }
                  });
                  var s = Snap('#animated');
var progress = s.select('#progress');

progress.attr({strokeDasharray: '0, 251.2'});
Snap.animate(0,251.2, function( value ) {
    progress.attr({ 'stroke-dasharray':value+',251.2'});
}, 5000);