[CSS]ステップで進行状況を表現するスタイルシート

Kollermedia.atのエントリーから、Step1, Step2と進行状況を表現するプログレスバーを実装するスタイルシートの紹介です。

Easy CSS Progress Bar

プログレスバーはリストで実装されており、classに済みは「past」、現在は「active」、未は「無し」を使用します。

個人的には、矩形の「1」と「Step1」が二重にあるのは好きではないのですが、「済み」「現在」「未」の状態も実体として実装できるといいな、と思いました。