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

予約ステップインジケータ

日時→情報入力→確認の3段階を進捗バーで表示。完了・現在・未完了を色分け。WordPressの予約フローや複数ステップ申込フォームの進捗表示に。

bookingcssinput

プレビュー

ソースコード

HTML

<div class="d10-02-04-wrap">
          <div class="d10-02-04-bar"></div>
          <div class="d10-02-04-steps">
            <div class="d10-02-04-step d10-02-04-done"><span class="d10-02-04-dot">1</span><span class="d10-02-04-lbl">日時</span></div>
            <div class="d10-02-04-step d10-02-04-active"><span class="d10-02-04-dot">2</span><span class="d10-02-04-lbl">情報入力</span></div>
            <div class="d10-02-04-step"><span class="d10-02-04-dot">3</span><span class="d10-02-04-lbl">確認</span></div>
          </div>
        </div>

CSS

.d10-02-04-wrap{position:relative;width:240px;padding-top:10px}
        .d10-02-04-steps{display:flex;justify-content:space-between;position:relative;z-index:2}
        .d10-02-04-step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1}
        .d10-02-04-dot{width:30px;height:30px;border-radius:50%;background:#e2e8f0;color:#94a3b8;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;border:2px solid #e2e8f0}
        .d10-02-04-lbl{font-size:11px;color:#94a3b8}
        .d10-02-04-bar{position:absolute;top:25px;left:30px;right:30px;height:3px;background:#e2e8f0;z-index:1}
        .d10-02-04-bar::after{content:"";position:absolute;left:0;top:0;height:100%;width:50%;background:#6366f1;border-radius:2px}
        .d10-02-04-done .d10-02-04-dot{background:#6366f1;border-color:#6366f1;color:#fff}
        .d10-02-04-done .d10-02-04-lbl{color:#6366f1}
        .d10-02-04-active .d10-02-04-dot{background:#fff;border-color:#6366f1;color:#6366f1}
        .d10-02-04-active .d10-02-04-lbl{color:#6366f1;font-weight:700}

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