Scroll Progress
Animated scroll progress for your web pages.
Examples
Scroll Progress Basic
Harbor Lane started as a spreadsheet. Three volunteers kept the stall bookings for the Saturday market in one shared file, and every Friday night someone overwrote someone else.
When the market grew to sixty stalls, the file stopped working. Traders called to ask whether their pitch was confirmed, and the answer was often a guess.
We spent the first week watching. Léa sat at the welcome desk with a notebook and wrote down every question a trader asked before nine in the morning.
Most questions were the same four: where is my pitch, can I swap with a neighbour, when do I pay, and who do I call if it rains.
The new booking page answers those four questions on one screen. A trader sees the map of the street, their pitch in the brand colour and the neighbours on either side.
Swapping became a request instead of a phone call. The other trader gets a message, accepts or declines, and the map updates for both of them.
Payment moved to the end of the week. Kofi argued for it after noticing that most traders waited for the weather forecast before committing.
The rain plan is a single switch for the organisers. When it is on, every trader gets the covered pitch assigned to them and a short note with the new time.
We kept the spreadsheet as an export. The volunteers still like to print it on Saturday morning, and nothing about the new tool should take that away from them.
Six weeks in, the Friday night calls have stopped. The welcome desk now hands out coffee instead of answers.
Scroll Progress Navigation
Harbor Lane started as a spreadsheet. Three volunteers kept the stall bookings for the Saturday market in one shared file, and every Friday night someone overwrote someone else.
When the market grew to sixty stalls, the file stopped working. Traders called to ask whether their pitch was confirmed, and the answer was often a guess.
We spent the first week watching. Léa sat at the welcome desk with a notebook and wrote down every question a trader asked before nine in the morning.
Most questions were the same four: where is my pitch, can I swap with a neighbour, when do I pay, and who do I call if it rains.
The new booking page answers those four questions on one screen. A trader sees the map of the street, their pitch in the brand colour and the neighbours on either side.
Swapping became a request instead of a phone call. The other trader gets a message, accepts or declines, and the map updates for both of them.
Payment moved to the end of the week. Kofi argued for it after noticing that most traders waited for the weather forecast before committing.
The rain plan is a single switch for the organisers. When it is on, every trader gets the covered pitch assigned to them and a short note with the new time.
We kept the spreadsheet as an export. The volunteers still like to print it on Saturday morning, and nothing about the new tool should take that away from them.
Six weeks in, the Friday night calls have stopped. The welcome desk now hands out coffee instead of answers.
Scroll Progress Gradient
Harbor Lane started as a spreadsheet. Three volunteers kept the stall bookings for the Saturday market in one shared file, and every Friday night someone overwrote someone else.
When the market grew to sixty stalls, the file stopped working. Traders called to ask whether their pitch was confirmed, and the answer was often a guess.
We spent the first week watching. Léa sat at the welcome desk with a notebook and wrote down every question a trader asked before nine in the morning.
Most questions were the same four: where is my pitch, can I swap with a neighbour, when do I pay, and who do I call if it rains.
The new booking page answers those four questions on one screen. A trader sees the map of the street, their pitch in the brand colour and the neighbours on either side.
Swapping became a request instead of a phone call. The other trader gets a message, accepts or declines, and the map updates for both of them.
Payment moved to the end of the week. Kofi argued for it after noticing that most traders waited for the weather forecast before committing.
The rain plan is a single switch for the organisers. When it is on, every trader gets the covered pitch assigned to them and a short note with the new time.
We kept the spreadsheet as an export. The volunteers still like to print it on Saturday morning, and nothing about the new tool should take that away from them.
Six weeks in, the Friday night calls have stopped. The welcome desk now hands out coffee instead of answers.
Installation
npx shadcn@latest add https://ui.ndekocode.dev/r/motion-scroll-progress.jsonComponent API
ScrollProgress
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | Optional CSS class for styling the scroll progress. | |
| springOptions | SpringOptions | Optional spring options for the scroll progress animation. | |
| containerRef | RefObject | Optional Ref object for the container element. |
Credit
Initiated by @bhataasim1