パーツ番号 04-10-09 ・ CSSのみ

進捗ドットインジケータ(静止)

丸ドットの並びで進み具合を示すミニマルな表示です。アンケートフォームやオンボーディング画面のページ位置表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-10-09-wrap">
          <p class="d04-10-09-label">お手続き状況</p>
          <div class="d04-10-09-dots">
            <span class="d04-10-09-dot d04-10-09-dot-done"></span>
            <span class="d04-10-09-dot d04-10-09-dot-done"></span>
            <span class="d04-10-09-dot d04-10-09-dot-active"></span>
            <span class="d04-10-09-dot"></span>
            <span class="d04-10-09-dot"></span>
          </div>
          <p class="d04-10-09-sub">3 / 5 完了</p>
        </div>

CSS

.d04-10-09-wrap{width:100%;max-width:260px;text-align:center;font-family:sans-serif}
        .d04-10-09-label{margin:0 0 10px;font-size:12.5px;color:#374151;font-weight:700}
        .d04-10-09-dots{display:flex;align-items:center;justify-content:center;gap:8px}
        .d04-10-09-dot{width:9px;height:9px;border-radius:50%;background:#e5e7eb}
        .d04-10-09-dot-done{background:#6366f1}
        .d04-10-09-dot-active{width:12px;height:12px;background:#8b5cf6}
        .d04-10-09-sub{margin:10px 0 0;font-size:11px;color:#9ca3af}

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