Scroll Progress Indicator

A bar fills from left to right in proportion to task completion.

Add a "Determinate Progress Bar" (also called a progress bar fill or progress indicator) to [where].
The bar should fill from left to right in step with the real progress, easing smoothly between updates, with the percentage shown beside it.
Use proper progress bar semantics with current, minimum and maximum values so screen readers can read it, and never let the fill move backwards.

A thin bar at the top of the page creeps forward during navigation and finishes on load.

Add a "Top Loading Bar" (also called a page progress bar) to [where].
A thin bar along the top edge should dart forward at first and then creep more and more slowly while the page loads; when loading finishes it should race to the end and fade out.
Never let it reach the end before loading is actually done, and keep it from covering or shifting the page content.

A circular arc grows around a ring to show percentage complete.

Add a "Progress Ring" (also called circular progress or radial progress) to [where].
Starting at the top, an arc should grow clockwise around the ring to show the percentage complete, easing out as it settles, while the number in the center counts up alongside it.
Keep the arc and the number in sync, and expose the value with proper progress bar semantics for screen readers.

Scrolling settles onto defined snap points such as slides or sections.

Add "Scroll Snap" (also called scroll snapping or snap scrolling) to [where].
When scrolling stops, the view should settle neatly onto the nearest section so each one lines up with the edge instead of stopping halfway.
Use the browser's native snapping so wheel, touch and keyboard scrolling all keep working, and make sure content taller than the view can still be read in full.

Animation progress is tied directly to scroll position, so scrolling forward or back plays or rewinds it.

Add a "Scroll-Linked Animation" (also called a scroll-driven animation or scroll scrub) to [where].
The animation should move exactly with the scroll position, so scrolling down plays it forward and scrolling up rewinds it on the spot, with no time-based easing of its own.
Map the whole animation to a clear scroll range, and show a sensible static state for users who prefer reduced motion.

An animation plays once when an element enters or leaves the viewport.

Add a "Scroll-Triggered Animation" (also called reveal on scroll or animate on scroll) to [where].
Each item should fade and slide up into place once as it enters the view, playing at its own quick, smooth pace rather than following the scroll position.
Keep the content visible if scripts fail to load, and show items straight away for users who prefer reduced motion.