パーツ番号 03-06-12 ・ CSSのみ

プログレスバー型ページネーション(現在位置表示)

全体に対する現在ページの位置を横棒の塗りで示す形です。読み物コンテンツやスライド形式の記事の進行表示に向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="d03-06-12-wrap">
          <div class="d03-06-12-bar"><i style="width:40%"></i></div>
          <span class="d03-06-12-label">Page 4 / 10</span>
        </div>

CSS

.d03-06-12-wrap{display:flex;flex-direction:column;gap:8px;width:100%;max-width:240px;}
        .d03-06-12-bar{width:100%;height:6px;border-radius:3px;background:#e5e7eb;overflow:hidden;}
        .d03-06-12-bar i{display:block;height:100%;background:#2563eb;border-radius:3px;}
        .d03-06-12-label{font-size:12px;color:#6b7280;font-weight:600;text-align:right;}

クラス名 .d03-06-12 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。