progress()
A CSS mathematical function that, given a value, a start point, and an end point, returns a normalized progress value between 0 and 1. It is used for fluid typography and linear mapping calculations.
Timeline (last 90 days)
The CSS progress() function takes a value, a start point and an end point and returns a unitless number between 0 and 1, calculated as (value - start) / (end - start) and clamped between 0 and 1.
The progress() function has reached Baseline status, and all mainstream browser engines support it.
Using progress() decouples the minimum, maximum and variation range in fluid typography, so changing any one parameter does not affect the others.
Browser support for tan() and atan2() is far broader than for progress().
The tan(atan2()) combination can produce a unitless 0–1 ratio in older browsers, equivalent to the output of progress(), but an outer clamp(0, ..., 1) is needed to clamp the result.
Any CSS property that needs to change linearly with a continuous variable (spacing, corner radius, container width, etc.) can apply the progress() pattern.
For teams still holding off, the tan(atan2()) fallback offers a gradual migration path: first unify the code structure, then replace the underlying implementation once progress() coverage meets requirements, with upper-level variable names and call patterns unchanged.
All Facts (7)
The CSS progress() function takes a value, a start point and an end point and returns a unitless number between 0 and 1, calculated as (value - start) / (end - start) and clamped between 0 and 1.
50%UnverifiedThe progress() function has reached Baseline status, and all mainstream browser engines support it.
50%UnverifiedUsing progress() decouples the minimum, maximum and variation range in fluid typography, so changing any one parameter does not affect the others.
50%UnverifiedBrowser support for tan() and atan2() is far broader than for progress().
50%UnverifiedThe tan(atan2()) combination can produce a unitless 0–1 ratio in older browsers, equivalent to the output of progress(), but an outer clamp(0, ..., 1) is needed to clamp the result.
50%UnverifiedAny CSS property that needs to change linearly with a continuous variable (spacing, corner radius, container width, etc.) can apply the progress() pattern.
50%UnverifiedFor teams still holding off, the tan(atan2()) fallback offers a gradual migration path: first unify the code structure, then replace the underlying implementation once progress() coverage meets requirements, with upper-level variable names and call patterns unchanged.
50%