読了プログレスバー

<div class="wrap08-01-05">
          <div class="bar08-01-05"><i></i><em>0%</em></div>
          <div class="box08-01-05">
            <h5>お知らせ記事のサンプル</h5>
            <p>この枠内をスクロールしてください。読み進めた割合に応じて、上部のプログレスバーが伸びていきます。</p>
            <p>読了バーは長い記事でも「あとどのくらいか」がひと目で分かり、読者の離脱を防ぐ効果が期待できます。</p>
            <p>実装はスクロール量を全体の高さで割るだけのシンプルな仕組みです。追加のライブラリは必要ありません。</p>
            <p>デザインはサイトのテーマカラーに合わせて自由に変更できます。細めのバーにするとより上品な印象になります。</p>
            <p>ここまで読むとバーは100%に到達します。お疲れさまでした。</p>
          </div>
          <span class="hint08-01-05">↓ 枠内をスクロール</span>
        </div>

.d08-01-05{background:#f8fafc;align-items:stretch;}
        .d08-01-05 .wrap08-01-05{width:100%;display:flex;flex-direction:column;position:relative;}
        .d08-01-05 .bar08-01-05{
          position:relative;height:22px;background:#e2e8f0;border-radius:11px;
          overflow:hidden;margin-bottom:10px;flex:none;
        }
        .d08-01-05 .bar08-01-05 i{
          position:absolute;inset:0 auto 0 0;width:0%;border-radius:11px;
          background:linear-gradient(90deg,#22c55e,#16a34a);transition:width .1s linear;
        }
        .d08-01-05 .bar08-01-05 em{
          position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
          font-style:normal;font-size:11px;font-weight:700;color:#334155;
        }
        .d08-01-05 .box08-01-05{
          flex:1;min-height:0;height:150px;overflow-y:auto;background:#fff;
          border:1px solid #e2e8f0;border-radius:10px;padding:14px 16px;
        }
        .d08-01-05 .box08-01-05 h5{margin:0 0 8px;font-size:13.5px;color:#0f172a;}
        .d08-01-05 .box08-01-05 p{margin:0 0 12px;font-size:12px;line-height:1.9;color:#475569;}
        .d08-01-05 .hint08-01-05{margin-top:8px;font-size:11px;color:#94a3b8;text-align:center;}

(function(){
        var box=document.querySelector('.d08-01-05 .box08-01-05');
        var bar=document.querySelector('.d08-01-05 .bar08-01-05 i');
        var pct=document.querySelector('.d08-01-05 .bar08-01-05 em');
        if(!box||!bar)return;
        box.addEventListener('scroll',function(){
          var max=box.scrollHeight-box.clientHeight;
          var p=max>0?Math.min(100,Math.round(box.scrollTop/max*100)):0;
          bar.style.width=p+'%';
          pct.textContent=p+'%';
        },{passive:true});
      })();