← Back to release summary

Interpolation progress functional notation: CSS progress() function

Category
CSS
Type
Chromium catches up
Status
In developer trial (Behind a flag) (Chrome In developer trial (Behind a flag))
Intent stage
None

Summary

The progress() functional notation returns a <number> value representing the position of one calculation (the progress value) between two other calculations (the progress start value and progress end value). progress() is a math function. The syntax of progress() is defined as follows: <progress()> = progress(<calc-sum>, <calc-sum>, <calc-sum>) where the first, second, and third <calc-sum> values represent the progress value, progress start value, and progress end value, respectively.

Motivation

These functions allow drawing a progress ratio from math functions, media features, and container features. Also, it can be used by web developers to get rid of units for different calc() use cases.

Standards & signals

View on chromestatus.com