ゲージ・KPIダッシュボード連動アニメ

<div class="d05-07-08 io-reveal">
          <svg viewBox="0 0 160 90" class="d05-07-08-svg">
            <path d="M10,80 A70,70 0 0 1 150,80" class="d05-07-08-bg"/>
            <path d="M10,80 A70,70 0 0 1 150,80" class="d05-07-08-fg"/>
            <line x1="80" y1="80" x2="80" y2="20" class="d05-07-08-needle"/>
            <circle cx="80" cy="80" r="6" class="d05-07-08-hub"/>
          </svg>
          <div class="d05-07-08-value"><span class="d05-07-08-num" data-target="78">0</span><span class="d05-07-08-pct">%</span></div>
          <p class="d05-07-08-caption">達成率</p>
        </div>

.d05-07-08{width:100%;display:flex;flex-direction:column;align-items:center;gap:2px}
        .d05-07-08-svg{width:170px;overflow:visible}
        .d05-07-08-bg{fill:none;stroke:#f1f5f9;stroke-width:12;stroke-linecap:round}
        .d05-07-08-fg{fill:none;stroke:#3b82f6;stroke-width:12;stroke-linecap:round;stroke-dasharray:219.9;stroke-dashoffset:219.9}
        .d05-07-08.is-in .d05-07-08-fg{animation:d05-07-08-fill 1.4s cubic-bezier(.2,.8,.2,1) forwards}
        @keyframes d05-07-08-fill{to{stroke-dashoffset:48.4}}
        .d05-07-08-needle{stroke:#111827;stroke-width:3;stroke-linecap:round;transform-origin:80px 80px;transform:rotate(-90deg)}
        .d05-07-08.is-in .d05-07-08-needle{animation:d05-07-08-needle 1.4s cubic-bezier(.2,.8,.2,1) forwards}
        @keyframes d05-07-08-needle{to{transform:rotate(50.4deg)}}
        .d05-07-08-hub{fill:#111827}
        .d05-07-08-value{font-size:22px;font-weight:700;color:#111827;display:flex;align-items:baseline;gap:2px;margin-top:-6px}
        .d05-07-08-pct{font-size:12px;color:#6b7280}
        .d05-07-08-caption{font-size:11px;color:#9ca3af;margin:0}

(function(){
          var root = document.getElementById('item-05-07-08');
          if(!root) return;
          var num = root.querySelector('.d05-07-08-num');
          var done = false;
          function run(){
            if(done) return;
            done = true;
            var target = parseInt(num.getAttribute('data-target'), 10);
            var t0 = performance.now();
            var dur = 1400;
            function tick(t){
              var p = Math.min(1, (t - t0) / dur);
              num.textContent = Math.round(target * p);
              if(p < 1) requestAnimationFrame(tick);
            }
            requestAnimationFrame(tick);
          }
          var io = new IntersectionObserver(function(entries){
            entries.forEach(function(e){ if(e.isIntersecting) run(); });
          }, { threshold: .3 });
          io.observe(root);
        })();