[CSS]シンプルなHTMLで、美しいプログレスバーを実装するスタイルシートのテクニック

フォームなどのタスク完了までの進捗状況を表示するプログレスバーを実装するスタイルシートのテクニックを紹介します。

シンプルなHTMLで実装されており、画像は一切無し、文字要素とborderとborder-radiusでビジュアル化されています。

Progress Bar

HTML

プログレスバーはリスト要素で実装されており、現在位置には.is-activeを与えます。

CSS

カラーは変数で定義されているので、簡単に変更できます。

プログレスバーのスタイルシートです。
各アイテムはFlexboxでレイアウトされており、ボーダーやドットもスタイルシートで実装されています。アニメーションなどのインタラクションも含まれているのでコードは長いですが、静的に使用するのであればコードはかなり短くなります。

実際の動作は、下記ページでご覧ください。