Progress is a normalized value that describes movement from a start state to an end state. A value of 0 means not started; 1 means complete. Because the same 0–1 scale works for position, opacity, color, and other numeric properties, it provides a common input for animation and interaction calculations. section 12.1.3 section 11.1.4
For a property moving from start to end, interpolate with current = start + (end − start) × progress. At progress 0.75, a value moving from 0 to 200 is 150. Progress supplies how far along the change is; interpolation converts that fraction into a CSS-ready value. section 12.1.3 section 13.4
function lerp(start, end, progress) {
return start + (end - start) * progress;
}
Use linear interpolation as the baseline conversion from normalized progress to a current numeric value. section 12.1.3
Transform progress when the motion or interaction needs a different feel:
- Apply an easing function to linear animation progress before interpolation. The transformed value changes acceleration and deceleration without changing the start or end values. section 12.1.3
- Use a cubic Bézier timing curve where x is time and y is progress. Its control points shape the beginning and ending behavior; steep sections move faster than shallow ones. section 11.1.4
- Derive scroll progress as scrollY / (scrollHeight − innerHeight). This maps the top and bottom of a scrollable document to 0 and 1. section 13.3.1
- Map drag progress to a slider range with minValue + progress × (maxValue − minValue). section 13.5
Reading progress indicator
A reading indicator turns scroll progress into several visual outputs at once: width is progress × 100%, hue is progress × 120, and displayed text is the rounded percentage. Recalculate on scroll, resize, and initial load; guard against a non-scrollable page by leaving progress at 0. section 13.3.1
