円グラフ(ドーナツ)アニメ

<div class="d05-04-02-box">
          <svg viewBox="0 0 120 120" class="d05-04-02-svg">
            <circle class="d05-04-02-bg" cx="60" cy="60" r="52"/>
            <circle class="d05-04-02-fg" cx="60" cy="60" r="52"/>
          </svg>
          <span class="d05-04-02-pct">0%</span>
        </div>
        <p class="d05-04-02-cap">目標達成率</p>

.d05-04-02 .d05-04-02-box{position:relative;width:150px;height:150px}
        .d05-04-02 .d05-04-02-svg{width:150px;height:150px;transform:rotate(-90deg)}
        .d05-04-02 .d05-04-02-bg{fill:none;stroke:#e6ebf3;stroke-width:12}
        .d05-04-02 .d05-04-02-fg{fill:none;stroke:#22b07d;stroke-width:12;stroke-linecap:round;
          stroke-dasharray:327;stroke-dashoffset:327;transition:stroke-dashoffset 1.4s ease}
        .d05-04-02 .d05-04-02-pct{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
          font-size:30px;font-weight:800;color:#22b07d}
        .d05-04-02 .d05-04-02-cap{margin-top:14px;font-size:13px;color:#5a6273;text-align:center}

(function(){
        var root=document.getElementById('item-05-04-02');if(!root)return;
        var fg=root.querySelector('.d05-04-02-fg'),pct=root.querySelector('.d05-04-02-pct');
        var target=76,len=327;
        function run(){fg.style.strokeDashoffset=len-(len*target/100);
          var st=null,dur=1400;
          function step(t){if(!st)st=t;var p=Math.min((t-st)/dur,1);
            pct.textContent=Math.round(target*(1-Math.pow(1-p,3)))+'%';if(p<1)requestAnimationFrame(step);}
          requestAnimationFrame(step);}
        function reset(){fg.style.strokeDashoffset=len;pct.textContent='0%';}
        var io=new IntersectionObserver(function(es){es.forEach(function(en){
          en.isIntersecting?run():reset();});},{threshold:.4});
        io.observe(root.querySelector('.d05-04-02'));
      })();