スクロール連動カウンター＆ゲージ

<div class="stats08-01-09">
          <div class="stat08-01-09">
            <svg viewBox="0 0 80 80" class="ring08-01-09">
              <circle cx="40" cy="40" r="34" class="rbase08-01-09"></circle>
              <circle cx="40" cy="40" r="34" class="rval08-01-09"></circle>
            </svg>
            <b class="cnt08-01-09" data-to="98">0</b><i>%</i>
            <span>顧客満足度</span>
          </div>
          <div class="stat08-01-09 barstat08-01-09">
            <b class="cnt08-01-09" data-to="1250">0</b><i>件</i>
            <span>累計制作実績</span>
            <div class="hbar08-01-09"><em></em></div>
          </div>
        </div>

.d08-01-09{background:#022c22;}
        .d08-01-09 .stats08-01-09{display:flex;gap:26px;align-items:center;justify-content:center;flex-wrap:wrap;}
        .d08-01-09 .stat08-01-09{
          position:relative;width:130px;display:flex;flex-direction:column;
          align-items:center;text-align:center;color:#d1fae5;
        }
        .d08-01-09 .ring08-01-09{width:110px;height:110px;transform:rotate(-90deg);}
        .d08-01-09 .rbase08-01-09{fill:none;stroke:rgba(255,255,255,.14);stroke-width:8;}
        .d08-01-09 .rval08-01-09{
          fill:none;stroke:#34d399;stroke-width:8;stroke-linecap:round;
          stroke-dasharray:213.6;stroke-dashoffset:213.6;
        }
        .d08-01-09 .stat08-01-09 b{font-size:26px;color:#fff;line-height:1.1;}
        .d08-01-09 .stat08-01-09 i{font-style:normal;font-size:12px;color:#6ee7b7;}
        .d08-01-09 .stat08-01-09:first-child b{position:absolute;top:32px;}
        .d08-01-09 .stat08-01-09:first-child i{position:absolute;top:62px;}
        .d08-01-09 .stat08-01-09 span{margin-top:8px;font-size:11.5px;letter-spacing:.05em;}
        .d08-01-09 .barstat08-01-09{justify-content:center;min-height:110px;}
        .d08-01-09 .hbar08-01-09{
          width:120px;height:10px;margin-top:10px;border-radius:5px;
          background:rgba(255,255,255,.14);overflow:hidden;
        }
        .d08-01-09 .hbar08-01-09 em{display:block;height:100%;width:0%;border-radius:5px;
          background:linear-gradient(90deg,#34d399,#a7f3d0);}

(function(){
        var root=document.querySelector('.prev.d08-01-09');
        if(!root||!('IntersectionObserver'in window))return;
        var counters=[].slice.call(root.querySelectorAll('.cnt08-01-09'));
        var ring=root.querySelector('.rval08-01-09');
        var bar=root.querySelector('.hbar08-01-09 em');
        var CIRC=213.6,raf=null;
        function ease(t){return 1-Math.pow(1-t,3);}
        function run(){
          var start=null;
          function frame(ts){
            if(start===null)start=ts;
            var p=Math.min(1,(ts-start)/1400),e=ease(p);
            counters.forEach(function(c){
              c.textContent=Math.round(parseInt(c.getAttribute('data-to'),10)*e).toLocaleString();
            });
            ring.style.strokeDashoffset=CIRC*(1-0.98*e);
            bar.style.width=(86*e)+'%';
            if(p<1)raf=requestAnimationFrame(frame);
          }
          raf=requestAnimationFrame(frame);
        }
        function reset(){
          if(raf)cancelAnimationFrame(raf);
          counters.forEach(function(c){c.textContent='0';});
          ring.style.strokeDashoffset=CIRC;
          bar.style.width='0%';
        }
        new IntersectionObserver(function(es){
          es.forEach(function(en){en.isIntersecting?run():reset();});
        },{threshold:0.25}).observe(root);
      })();