<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
Limited availability 72% global usage
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Not ready for production without a fallback.
126+
18+
126+