ラベル付き進捗バー
上にラベルと数値、下に進み具合を示すバーを置いた進捗表示です。バーの土台は灰色の角丸帯で、その中の塗り部分の幅を width:72% のように割合で指定しています。読み込み時には @keyframes アニメーションで幅が0%から目標値まで伸びるため、達成感のある動きになります。
解説
上にラベルと数値、下に進み具合を示すバーを置いた進捗表示です。バーの土台は灰色の角丸帯で、その中の塗り部分の幅を width:72% のように割合で指定しています。読み込み時には @keyframes アニメーションで幅が0%から目標値まで伸びるため、達成感のある動きになります。塗りには紫系のグラデーションを使い、単色より華やかに見せています。バーの角は border-radius:9999px で丸め、overflow:hidden で塗りを土台の形に収めています。JavaScriptは不要です。
活躍する場面
- 目標金額やタスク完了率などの達成度表示
- プロフィール入力やセットアップの進み具合
- スキルやステータスのレベル可視化
進捗の値は塗り要素の width を変えるだけで反映でき、上のパーセント表示も同じ数値に合わせます。実際の進捗をプログラムで動かす場合は、この width を更新します。色はグラデーションの2色を差し替えればブランドに合わせられます。表示の数字とバーの幅は必ず一致 させてください。アニメーションが苦手な利用者へは prefers-reduced-motion で伸びる動きを止め、最初から目標幅で表示する配慮ができます。
よくある質問
進捗の割合はどこで変えますか
塗り部分（pb__f）のwidthの値を変えるだけです。72%なら7割強まで埋まります。上に表示しているパーセントの数字も同じ値に揃えてください。表示とバーの幅がずれると見る人が混乱します。
読み込み時に伸びるアニメーションを止められますか
止められます。塗り要素のanimation指定を外せば最初から目標の幅で表示されます。動きに敏感な利用者へ配慮する場合は、prefers-reduced-motionのメディアクエリでアニメーションを無効化する方法もおすすめです。