Scroll progress indicator
A bar or ring that fills as you move down the page, showing how much of the current content remains.
See it
What it is
A scroll progress indicator maps the page's current scroll position to a bar, ring, or percentage. At the top it reads 0%; at the maximum scroll position it reads 100%. Unlike a loading bar, it reports where the reader is in content that already exists.
Reach for it on long articles, documentation, and stepped stories where the remaining distance is otherwise invisible. Native CSS scroll-driven animation can tie scaleX directly to the root scroll timeline; a JavaScript version divides scrollTop by scrollHeight minus clientHeight.
Gotcha: dynamic images, expanding sections, and viewport changes alter the denominator, so cached page heights drift. Recalculate when layout changes, guard against pages with no scrollable distance, and use transform rather than width to avoid layout work. Mark a decorative bar aria-hidden, or expose a real progressbar with an accessible label and updated aria-valuenow.
Ask AI for it
Build a fixed reading-progress bar with native CSS scroll-driven animation. Animate transform from scaleX(0) to scaleX(1), set transform-origin: left, and use animation-timeline: scroll(root block) so the root document's scroll range drives progress from 0% to 100%. Keep the bar out of layout, mark it aria-hidden if it is decorative, and under prefers-reduced-motion keep it tied directly to scroll with no eased catch-up, pulsing, or other added motion.