v138 · css

Interpolation progress functional notation: CSS progress() function

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.

concepts

  1. progress()

    CSS progress() returns proportional distance between a value, start, and end. Clamp it when a UI needs a bounded 0..1 range.

  2. Scrollytelling header

    A header that shrinks and tints between 40px and 160px of scroll — bounded interpolation, native and jank-free, no JS scroll listener.

  3. Temperature gauge gradient

    One temperature value drives five overlapping threshold bands (cold, cool, mild, warm, hot) plus a continuous oklch() hue gradient. Each band is one progress() call; the engine's 0..1 clamp gives you ranged threshold UI for free.

  4. Range slider UI

    Four slider controls where fill width, colour zone, colour temperature, and threshold badge all derive from clamp(0, progress(value, min, max), 1). JavaScript only updates custom properties, with a fallback path when native progress() is unavailable.

  5. Multi-Step Progress

    A checkout / onboarding / wizard flow where the connector line between steps is calc((100% - 32px) * progress(var(--current-step), 1, var(--total-steps))). Switch between three flows with different step counts — the same CSS expression handles 4, 5, or 6 steps with no JS geometry. A live panel shows the computed progress() value and how it maps to the fill percentage.

why it shipped

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.

references