progress()

概要

progress()関数は、ある値が2つの基準値の間でどの位置にあるかを0から1の範囲の比率として計算します。値が範囲外の場合は0または1にクランプされます。他のCSS計算関数と組み合わせることで、値の補間や動的なスタイル計算に活用できます。データビジュアライゼーションや段階的なスタイル変化の実装に有用です。

対応ブラウザ

基本構文

.bar {
  --value: 75;
  width: calc(progress(var(--value), 0, 100) * 100%);
}

実務での使いどころ

• 値の正規化によるスタイル計算

  任意の範囲の値を0〜1に正規化し、幅や色の補間など動的なスタイル計算に利用します。

注意点

アクセシビリティ

• progress()で動的に変化するスタイルが、prefers-reduced-motionの設定を尊重するよう配慮してください。

参考リンク

• MDN Web Docs — progress()