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

Component API

ScrollProgress

PropTypeDefaultDescription
classNamestringOptional CSS class for styling the scroll progress.
springOptionsSpringOptionsOptional spring options for the scroll progress animation.
containerRefRefObjectOptional Ref object for the container element.

Credit

Initiated by @bhataasim1