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

丸数字3ステップインジケータ(進行中固定)

3つの丸番号を線でつないだステップ表示を、2番目が進行中の状態で固定表示します。資料請求フォームや会員登録フォームの現在地表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-10-01-wrap">
          <div class="d04-10-01-step d04-10-01-done">
            <span class="d04-10-01-circle">&#10003;</span>
            <span class="d04-10-01-label">情報入力</span>
          </div>
          <span class="d04-10-01-line d04-10-01-line-done"></span>
          <div class="d04-10-01-step d04-10-01-active">
            <span class="d04-10-01-circle">2</span>
            <span class="d04-10-01-label">内容確認</span>
          </div>
          <span class="d04-10-01-line"></span>
          <div class="d04-10-01-step">
            <span class="d04-10-01-circle">3</span>
            <span class="d04-10-01-label">完了</span>
          </div>
        </div>

CSS

.d04-10-01-wrap{display:flex;align-items:flex-start;justify-content:center;width:100%;max-width:300px;font-family:sans-serif}
        .d04-10-01-step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none;width:64px}
        .d04-10-01-circle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#e5e7eb;color:#9ca3af;font-size:13px;font-weight:700;border:2px solid #e5e7eb}
        .d04-10-01-done .d04-10-01-circle{background:#6366f1;border-color:#6366f1;color:#fff}
        .d04-10-01-active .d04-10-01-circle{background:#fff;border-color:#6366f1;color:#6366f1}
        .d04-10-01-label{font-size:11px;color:#6b7280;white-space:nowrap}
        .d04-10-01-active .d04-10-01-label{color:#4338ca;font-weight:700}
        .d04-10-01-line{flex:none;width:36px;height:2px;background:#e5e7eb;margin-top:15px}
        .d04-10-01-line-done{background:#6366f1}

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