<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.

/* 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%);
}
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+
Kinsta

Your first month is free

Managed WordPress hosting for faster sites.

Learn more

New CSS drops.

Join 600+ readers who've survived clearfix hacks.

ESC