JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex-wrapper">
  <div class="single-chart">
    <svg viewBox="0 0 36 36" class="circular-chart orange">
      <path class="circle-bg"
        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"
      />
      <path class="circle"
        stroke-dasharray="var(--progress), 100"
        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"
      />
      <text x="18" y="20.35" class="percentage">30%</text>
      <text x="13" y="27" class="percentage2">ТЕКСТ</text>
    </svg>
  </div>
</div>

CSS

.flex-wrapper {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  width: 80%;
  height: 10000px;
}

.single-chart {
  --progress: 0;
  position: fixed;
  top: 0;
  width: 100%;
  justify-content: space-around ;
}

.circular-chart {
  display: block;
  margin: 10px auto;
  max-width: 80%;
  max-height: 220px;
}

.circle-bg {
  fill: none;
  stroke: #fff;
  stroke-width: 2.8;
}

.circle {
  fill: none;
  stroke-width: 2.8;
  
  animation: progress 1s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.circular-chart.orange .circle {
  stroke: #2faa04;
}

.circular-chart.green .circle {
  stroke: #2faa04;
}

.circular-chart.blue .circle {
  stroke: #2faa04;
}

.percentage {
  fill: #000;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
  position: relative;
}
.percentage2 {
  fill: #000;
  font-family: sans-serif;
  font-size: 0.2em;
  position: relative;
}
@media only screen and (max-width: 960px){
.flex-wrapper {
  width: 100%;
    margin: 0 auto;
    flex-wrap: wrap;
}
.single-chart {
  width: 50%;
}

@media only screen and (max-width: 768px){
.flex-wrapper {
    width: 50%;
    margin: auto;
    flex-wrap: wrap;
}
.single-chart {
  width: 100%;
  justify-content: space-around ;
}

JavaScript

let chart = document.querySelector('.circular-chart');


function getScrollPercent() {
  let h = document.documentElement, 
      b = document.body,
      st = 'scrollTop',
      sh = 'scrollHeight';
  return (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
}

window.addEventListener('scroll', () => {chart.style.setProperty('--progress', getScrollPercent())});