JSFiddle - React, Tailwind, and code Playground

by Yuriy Petrichenko

HTML

<div>
<span id="seventeenSpan">2%</span>
 <svg  class="seventeenLine">
 <polyline id="line17" points="100,10 10,10"/>
 </svg>
 </div>

CSS

body{
background-color:black;
}
.seventeenLine{
  position: relative;
  left: 180px;
  top: 50px;
}
#line17{
  stroke:#fff;
  stroke-width:2px;
  fill:transparent;
  stroke-dasharray: 150;
    stroke-dashoffset:0;
  animation: dasharray 1s linear;
}
#seventeenSpan{
  font-weight: bold;
  position: relative;
  left: 245px;
  bottom: 105px;
  animation: zoomSize 2s linear;
  color: #fff;
}