固定表示・円形読了率インジケータ

<div class="d06-09-03-wrap">
          <div class="d06-09-03-body">
            <section><h4>はじめに</h4><p>右上の円形メーターが常時追従し、読了率をパーセントで表示します。</p></section>
            <section><h4>背景</h4><p>数値による進捗表示は、目次が無い記事でも読了状況を直感的に伝えられます。</p></section>
            <section><h4>手順</h4><p>スクロール量から割合を算出し、円の線の長さ(stroke-dashoffset)を書き換えるだけで実現できます。</p></section>
            <section><h4>注意点</h4><p>固定表示のため、他の要素と重ならない余白設計が必要です。</p></section>
            <section><h4>まとめ</h4><p>ミニマルながら読了状況が一目で分かるインジケータです。</p></section>
          </div>
          <div class="d06-09-03-ring">
            <svg viewBox="0 0 64 64">
              <circle class="d06-09-03-bg" cx="32" cy="32" r="27"></circle>
              <circle class="d06-09-03-fg" cx="32" cy="32" r="27"></circle>
            </svg>
            <span class="d06-09-03-pct">0%</span>
          </div>
        </div>

.prev.d06-09-03{padding:0;display:block}
        .d06-09-03-wrap{position:relative;height:260px}
        .d06-09-03-body{height:100%;overflow-y:auto;padding:18px 70px 18px 18px;box-sizing:border-box}
        .d06-09-03-body section{padding:6px 0 14px;border-bottom:1px dashed #eef0f5}
        .d06-09-03-body h4{margin:0 0 6px;font-size:13px;color:#242a3d}
        .d06-09-03-body p{margin:0;font-size:12px;color:#666c80;line-height:1.7}
        .d06-09-03-ring{position:absolute;top:14px;right:14px;width:54px;height:54px}
        .d06-09-03-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
        .d06-09-03-bg{fill:none;stroke:#e6e8f0;stroke-width:5}
        .d06-09-03-fg{fill:none;stroke:#5b3df0;stroke-width:5;stroke-linecap:round;stroke-dasharray:169.6;stroke-dashoffset:169.6;transition:stroke-dashoffset .15s linear}
        .d06-09-03-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#3a2f6b}

(function(){
        var root=document.getElementById('item-06-09-03');if(!root)return;
        var body=root.querySelector('.d06-09-03-body');
        var fg=root.querySelector('.d06-09-03-fg');
        var pctEl=root.querySelector('.d06-09-03-pct');
        var C=169.6;
        function upd(){
          var max=body.scrollHeight-body.clientHeight;
          var pct=max>0?Math.min(1,body.scrollTop/max):0;
          fg.style.strokeDashoffset=(C*(1-pct));
          pctEl.textContent=Math.round(pct*100)+'%';
        }
        body.addEventListener('scroll',upd);upd();
      })();