<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.
Syntax
/* Usage 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
Since
2020 72% global usage
This feature is not Baseline because it does not work in some of the most widely-used browsers.
126+
18+
126+