円形プログレス（パーセント表示）
円形プログレスは、進捗のパーセントを中央に表示する確定型ローダーです。背景に conic-gradient を使い、進捗色と未進捗色の境目を calc(var(--p)*1%) で決めています。 --p という CSS 変数に数値を入れるだけで弧の長さが変わる仕組みです。
解説
円形プログレスは、進捗のパーセントを中央に表示する確定型ローダーです。背景に conic-gradient を使い、進捗色と未進捗色の境目を calc(var(--p)*1%) で決めています。--p という CSS 変数に数値を入れるだけで弧の長さが変わる仕組みです。中央は ::before の円で背景色をくり抜き、リング状に見せています。表示テキストは span に書き、--p と一緒に更新します。
動的に進捗を変えるには
アップロードやインストール、フォームの記入率など、割合が確定する処理に向きます。値を動かすには、要素の style で --p を更新し、同時に span のテキストも書き換えます。CSS 変数なので JavaScript からの 1 行で連動できます。
- 太さは
::beforeのinset（大きいほど細リング） - 進捗色は
conic-gradientの前半色、軌道色は後半色 - conic-gradient は古い一部ブラウザで未対応のため対象環境を確認する
使用例・適したシーン
- データ取得中の表示
- 送信ボタンクリック後のフィードバック
- 画像読み込み待ち
よくある質問
進捗の数字はどう更新しますか。
要素の style で --p の値を変え、同時に中央の span のテキストも同じ数字に書き換えます。CSS 変数を読むだけで弧が伸びるので、JavaScript 側は数値の代入だけで済みます。
リングの太さは変えられますか。
中央をくり抜いている ::before の inset を調整します。値を大きくすると中央の穴が広がってリングが細くなり、小さくすると太いリングになります。