読了プログレス+読了時間バッジ

<div class="d06-02-08-wrap">
          <div class="d06-02-08-bar"><span class="d06-02-08-fill"></span></div>
          <div class="d06-02-08-top">
            <span class="d06-02-08-badge">⏱ 約5分で読めます</span>
          </div>
          <div class="d06-02-08-body">
            <p>この記事は読了までおよそ5分。上部の進捗バーが読み進めた割合を示します。長文でも残りの分量が一目で分かるので、最後まで安心して読めます。</p>
            <p>スクロールに合わせてバーが伸び、記事の全体像を把握しやすくなります。集中して読み切れる工夫のひとつです。</p>
            <p>読了率を意識した設計は、直帰率の改善にもつながります。まずは体験してみてください。</p>
            <p>下までスクロールすると進捗が100%に達します。読み終わりの達成感も演出できます。</p>
          </div>
        </div>

.prev.d06-02-08{padding:0;display:block}
        .d06-02-08-wrap{position:relative;height:260px;display:flex;flex-direction:column}
        .d06-02-08-bar{height:4px;background:#eceef5;flex:0 0 auto}
        .d06-02-08-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,#4f7cf7,#9b5cf6);transition:width .1s linear}
        .d06-02-08-top{padding:14px 16px 0}
        .d06-02-08-badge{display:inline-block;font-size:11px;font-weight:700;color:#3a49d6;background:#e8ebff;padding:5px 12px;border-radius:20px}
        .d06-02-08-body{flex:1;overflow-y:auto;padding:12px 16px 16px;font-size:12px;line-height:1.8;color:#666c80}
        .d06-02-08-body p{margin:0 0 12px}

(function(){
        var root=document.getElementById('item-06-02-08');if(!root)return;
        var body=root.querySelector('.d06-02-08-body'),fill=root.querySelector('.d06-02-08-fill');
        function upd(){var max=body.scrollHeight-body.clientHeight;var p=max>0?(body.scrollTop/max)*100:0;fill.style.width=p+'%';}
        body.addEventListener('scroll',upd);upd();
      })();