CSS - progress()

• トップ
• CSSリファレンス
• progress()

概要

説明

開始値 start と終了値 end における現在値 curr の進捗割合を 0.0～ の実数値で返します。

使用例

下記の例では、0px～100px の範囲において 80px は 80% の位置になるため、0.8 を返します。Chrome 138 でサポートされましたが、現時点(2025年7月)では他のブラウザではまだ未サポートの様です。

.my-style {
  zoom: progress(80px, 0px, 100px);
}

<div class="my-style">
  AAA
</div>

リンク

• https://drafts.csswg.org/css-values-5/#progress
• https://caniuse.com/mdn-css_types_progress