複数ステップ プログレスバー

解説

複数ステップの進み具合を 1 本のバーで表す進捗インジケーターです。外側の pst__bar がグレーのトラック、内側の pst__fill が現在地までの色付きバーで、進捗は style="width:40%" のように幅で表現します。塗りには linear-gradient のグラデーションを当て、transition:width を効かせているため、幅を更新すると滑らかに伸びます。下のラベルで「Step 2 / 5」のように現在地を文字でも示しています。

使いどころ

• 会員登録や購入手続きなど複数画面のウィザード
• アンケートやオンボーディングの進行表示
• アップロードや設定完了までの達成度

進捗を変えるには塗りの width をパーセントで書き換えるだけです。5 ステップ中 2 つ目なら 40 パーセントというように、現在のステップ数から計算した値を入れます。色はグラデーションの 2 色を差し替えればブランドに合わせられます。バーの色変化は transition による動きなので、動きに敏感な利用者向けには prefers-reduced-motion で即時切り替えにする配慮を足すと親切です。テキストのラベルを併記しておくと、視覚だけに頼らず進捗が伝わります。