progress()
progress() は CSS の関数で、2 つの値（進行の開始値と終了値）に対する 1 つの値（進行値）の位置を表す <number> 値を返します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 138 | 138 | | 26 | 138 | 26 | |
基本構文
CSS
.bar {
--value: 75;
width: calc(progress(var(--value), 0, 100) * 100%);
}ライブデモ
実務での使いどころ
-
値の正規化によるスタイル計算
任意の範囲の値を0〜1に正規化し、幅や色の補間など動的なスタイル計算に利用します。
注意点
- Firefoxでは未サポートのため、フォールバックとしてcalc()による手動計算を用意してください。
アクセシビリティ
- progress()で動的に変化するスタイルが、prefers-reduced-motionの設定を尊重するよう配慮してください。