JSFiddle - React, Tailwind, and code Playground

by Ankit Patidar

HTML

<div id="container" class="pchart pc-container">
        <svg viewBox="0 0 36 36" class="pc-chart">
            <path class="pc-bg" d="M18 2.0845a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
            <path class="pc-fill" d="M18 2.0845  a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" style="transition: stroke-dashoffset 1s ease-in 0s;stroke-dasharray: 90;"></path>
        </svg>
        <div class="pc-text">
            <div class="pc-num">
                <span id="pc-percent" style="transition-duration: 0.1s; transition-delay: 0.2s; transition-timing-function: ease-in;">10%</span>
                <span id="pc-actual" style="transition-duration: 0.1s; transition-delay: 0.2s; transition-timing-function: ease-in;">190</span>
            </div>
            <span id="pc-unit">jQueryScript</span>
        </div>
        </div>
        
        <script src="https://adminlte.io/themes/v3/plugins/jquery/jquery.min.js"></script>

CSS

.pchart.pc-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
}

.pchart.pc-container svg.pc-chart {
  display: block;
  height: 100%;
}

.pchart.pc-container svg.pc-chart path.pc-bg {
  fill: none;
  stroke: #d8d6d6;
  stroke-width: 4;
  stroke-dasharray: 100,100;
}

.pchart.pc-container svg.pc-chart path.pc-fill {
  fill: none;
  stroke-width: 4;
  stroke: black;
  stroke-dasharray: 0,100;
  -webkit-transition: stroke-dasharray 1s linear;
  transition: stroke-dasharray 1s linear;
}

.pchart.pc-container div.pc-text {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 50%;
  top: 0;
  left: 0;
  width: 98%;
  height: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.pchart.pc-container div.pc-text:hover .pc-num #pc-percent {
  opacity: 0%;
  -webkit-transition-delay: 0s !important;
          transition-delay: 0s !important;
}

.pchart.pc-container div.pc-text:hover .pc-num #pc-actual {
  opacity: 100%;
  -webkit-transition-delay: 0s !important;
          transition-delay: 0s !important;
}

.pchart.pc-container div.pc-text .pc-num {
  min-height: 1px;
  margin-top: 8%;
  height: 25% !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 50%;
}

.pchart.pc-container div.pc-text .pc-num #pc-percent {
  font-size: 1.3rem;
  font-weight: bold;
  letter-spacing: 0.075rem !important;
  position: absolute;
  left: 50%;
  opacity: 100%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transition:...

JavaScript

$(function () {
   // Bring life to the dials
var point = 90
var interval = setInterval(function(){
  console.log(point++)
  //$(".pc-fill").css("stroke-dasharray", point, 100);
  
  $(".pc-fill").css("strokeDasharray", 100)
	$(".pc-fill").css("strokeDashoffset", point); 
  
  if(point <= 0 || point >=100){
    clearInterval(interval);
  }
  
}, 1000);

  })