<progress>
A relative math function that calculates how far a value is between two points (a start and an end). It returns a number between 0 and 1, essentially giving you a percentage of completion.
Quick example
.scroll-indicator {
/* Calculates how much of the container has been scrolled */
--scroll-progress: progress(var(--current-scroll), 0, var(--max-scroll));
width: calc(var(--scroll-progress) * 100%);
}<progress> Browser Support
Widely availableSince 201572% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.
Safe to use without fallbacks.
6+
6+
6+
12+