Components/navigation

Scroll Progress

A gradient reading-progress bar with a circular percentage indicator over an article layout.

Free

Field notes

The quiet mechanics of a good scroll

Ilya Renner6 min read

Progress should be felt before it is read. A thin line travelling across the top of the page does most of the work, because the eye follows its motion without any effort at all.

The dial in the corner is for the pause, the moment a reader glances up and wonders how far along they are. It answers in a single number, then steps back out of the way.

Neither element asks for attention. They report, quietly and continuously, and let the writing stay the thing you actually came here to read.

Get the pacing right and no one will notice the instrument. They will only notice that the page felt easy to finish.

0%
Usage: paste this file into your project (e.g. components/scroll-progress.tsx), make sure framer-motion, clsx and tailwind-merge are installed, and add the cn() helper from the docs.