ScrollProgress

A thin bar fixed to the top (or bottom) of the viewport that tracks how far the user has scrolled through the page. Drop it into any layout for instant reading progress feedback.

Interactive Demo

Scroll this page up and down — the bar fixed to the top of the viewport fills in as you scroll. Each example below mounts its own bar, so only the last one mounted will be visible at any given time.

Default blue bar pinned to the top of the viewport with a height of 3px.

Try scrolling this page to see the bar grow from left to right as you approach the bottom.

The component is rendered via a portal, so it will appear at the very top of the window regardless of where ScrollProgress is placed in your component tree.

Custom colors

Tailor the color and thickness to match your theme.

A 4px pink bar — scroll to see it update in real time.

Pinned to bottom

Use position="bottom" to pin the bar to the bottom edge of the viewport.

A 5px emerald bar pinned to the bottom of the viewport.

Usage

import { ScrollProgress } from "@mantleui/react/motion";

// Default
<ScrollProgress />

// Custom color and height
<ScrollProgress color="#ec4899" height={4} />

// Pinned to the bottom
<ScrollProgress color="#10b981" position="bottom" />

Props

Prop	Type	Default	Description
`color`	`string`	`"#3b82f6"`	CSS color of the progress bar.
`height`	`number`	`3`	Height of the bar in pixels.
`position`	`"top" \| "bottom"`	`"top"`	Edge of the viewport to pin the bar to.
`zIndex`	`number`	`9999`	CSS z-index for stacking over other fixed elements.

color"#3b82f6"

string

CSS color of the progress bar.

height3

number

Height of the bar in pixels.

position"top"

"top" | "bottom"

Edge of the viewport to pin the bar to.

zIndex9999

number

CSS z-index for stacking over other fixed elements.