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

予約ステップインジケーター(固定・現在地表示)

予約手続きの現在位置を3段階で示すインジケーター。フォーム上部に置いて進行状況を伝えるのに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="steps">
          <div class="step done"><span class="dot">1</span><span class="lb">日時選択</span></div>
          <span class="line done"></span>
          <div class="step now"><span class="dot">2</span><span class="lb">情報入力</span></div>
          <span class="line"></span>
          <div class="step"><span class="dot">3</span><span class="lb">確認</span></div>
        </div>

CSS

.d10-09-10 .steps{ display:flex; align-items:center; }
        .d10-09-10 .step{ display:flex; flex-direction:column; align-items:center; gap:5px; }
        .d10-09-10 .step .dot{ width:22px; height:22px; border-radius:50%; background:#eceef1; color:#9098a3; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
        .d10-09-10 .step .lb{ font-size:9px; color:#9098a3; white-space:nowrap; }
        .d10-09-10 .step.done .dot{ background:#2f9e5c; color:#fff; }
        .d10-09-10 .step.done .lb{ color:#2f9e5c; }
        .d10-09-10 .step.now .dot{ background:#3f6fe0; color:#fff; }
        .d10-09-10 .step.now .lb{ color:#3f6fe0; font-weight:700; }
        .d10-09-10 .line{ width:20px; height:2px; background:#eceef1; margin:0 3px 16px; }
        .d10-09-10 .line.done{ background:#2f9e5c; }

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