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

ドット連結型プログレス表示

ドットと線を繋げてステップの完了状況を示す表示です。会員登録や購入フローの進捗案内に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="dwrap">
          <div class="dot done">1</div><span class="dline done"></span>
          <div class="dot done">2</div><span class="dline done"></span>
          <div class="dot current">3</div><span class="dline"></span>
          <div class="dot">4</div>
        </div>

CSS

.d09-10-08 .dwrap{display:flex;align-items:center}
        .d09-10-08 .dot{width:30px;height:30px;border-radius:50%;background:#e5e7eb;color:#94a3b8;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
        .d09-10-08 .dot.done{background:#22c55e;color:#fff}
        .d09-10-08 .dot.current{background:#4f7cff;color:#fff;box-shadow:0 0 0 4px #dbe6ff}
        .d09-10-08 .dline{width:32px;height:3px;background:#e5e7eb}
        .d09-10-08 .dline.done{background:#22c55e}

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