BLOGブログ

CSSだけで作るステップバー

お問合せフォームなど複数ステップがあるページでよく見かける、進捗状況を表すステップバーを作ってみました。(レスポンシブ対応)

flexboxを使っているので対応してないブラウザでは使えません。

コードサンプル

See the Pen StepBar by Yusuke Yamanda (@ColdSleep) on CodePen.

各ステップにclass="visited"を追加すると色が変わります。