ステッパー進捗インジケーター
これは複数ステップの手続きで現在地を示すステッパー（進捗インジケーター）です。丸い番号の steps__item と、それをつなぐ steps__line が交互に並び、JavaScript が現在の cur 番号と各要素の位置を比べて状態クラスを振り直します。
解説
これは複数ステップの手続きで現在地を示すステッパー（進捗インジケーター）です。丸い番号の steps__item と、それをつなぐ steps__line が交互に並び、JavaScript が現在の cur 番号と各要素の位置を比べて状態クラスを振り直します。済んだ丸には steps__item--done、いま居る丸には steps__item--active が付き、active には box-shadow でリング状の強調が入ります。「次へ」「戻る」ボタンに加えて丸の直接クリックでも移動でき、線も通過済みの分だけ色が変わります。
使う場面
- 会員登録やチェックアウトなど複数画面に分かれた入力フロー
- 初期設定ウィザードやチュートリアルの進み具合の表示
- 申し込みフォームで全体像と残りを利用者に伝えたいとき
ステップ数は HTML の丸と線の組を増減させるだけで変えられ、JavaScript は要素を配列で取得しているので自動的に追従します。色はメインの #667eea を置き換えれば統一できます。実際の入力フォームに組み込む際は、丸の番号だけでなく各段の名前を添えると分かりやすく、現在のステップを aria-current 等で読み上げに伝えるとさらに親切です。
よくある質問
ステップ数を 5 つや 6 つに増やせますか？
できます。HTML 内で丸（steps__item）と線（steps__line）の組を必要な数だけ追加するだけです。スクリプトは要素をまとめて取得するので、コードの修正は不要です。
丸をクリックして任意のステップへ飛べてしまうのは仕様ですか？
はい、サンプルでは各丸にクリックで移動する処理を付けています。未入力の段に飛ばせたくない場合は、そのクリック処理を外すか条件を加えてください。