円形プログレス（数字付き）
これは中央にパーセント数値を表示する円形プログレスです。SVG の円を2枚重ね、背景の薄い円の上に進捗を示す色付きの円を描きます。進捗量は --p というCSS変数で渡し、 pathLength="100" と stroke-dasharray ・ stroke-dashoffset を組み合わせて、0〜100の数…
解説
これは中央にパーセント数値を表示する円形プログレスです。SVG の円を2枚重ね、背景の薄い円の上に進捗を示す色付きの円を描きます。進捗量は --p というCSS変数で渡し、pathLength="100" と stroke-dasharray・stroke-dashoffset を組み合わせて、0〜100の数値で塗り進む量を表現します。transition が効いているので、値が変わるとなめらかにアニメーションします。CSSとSVGのみで、外部ライブラリは不要です。
こんな表示に使えます
- ファイルアップロードやダウンロードの進捗
- タスクやプロフィール入力の完了率
- テストやアンケートのスコア・達成度の可視化
進捗を変えるには、要素の --p の値と中央テキストを書き換えるだけです。色は .cp__fg の stroke、線の太さは stroke-width で調整します。stroke-linecap:round で先端が丸くなり、やわらかい印象になります。数値だけでなく role="progressbar" と aria-valuenow を付けると、進捗状況がスクリーンリーダーにも正しく伝わります。
使用例・適したシーン
- データ取得中の表示
- 送信ボタンクリック後のフィードバック
- 画像読み込み待ち
よくある質問
進捗のパーセントを変えるにはどうしますか？
要素の style にある --p の数値（例では72）と、中央に表示している 72% のテキストを書き換えるだけです。--p は 0 から 100 の範囲で指定します。
円の色や太さは変えられますか？
はい。進捗の色は .cp__fg の stroke、背景円の色は .cp__bg の stroke で指定しています。線の太さは両方の stroke-width を同じ値に変えると整います。