Scroll Progress Bar

Thin progress bar fixed to top or bottom of the page that fills as user scrolls. Spring-animated for smooth motion. Configurable color, height, and position.

scrollprogressbarspring

Installation

bash

# Copy scroll-progress-bar.tsx to your project
cp components/ui/scroll-progress-bar.tsx your-project/components/ui/scroll-progress-bar.tsx

How to use

tsx

import { ScrollProgressBar } from "@/components/ui/scroll-progress-bar";

tsx

<ScrollProgressBar
  colorClass="bg-zinc-900 dark:bg-white"
  heightClass="h-1"
  position="top"
/>

Dependencies

framer-motion

Exports

ScrollProgressBar

File

components/ui/scroll-progress-bar.tsx

Preview

Scroll inside this area — watch the progress bar at the top

The Scroll Progress Bar

A scroll progress bar is a thin indicator that fills horizontally as the user scrolls. It provides an instant visual cue for how much content remains — without taking up meaningful screen real estate.

How It Works

This implementation uses Framer Motion's useScroll to track the scroll position and useSpring for smooth, spring-based interpolation. The result is a buttery smooth indicator.

Configuration

Customize the color with any Tailwind background class, adjust the height, choose top or bottom positioning, and tune the spring physics with stiffness and damping props.

Use Cases

Blog posts, documentation pages, long-form articles, and landing pages all benefit from a progress indicator. It helps users understand their position without being intrusive.

Implementation

Place the component at your root layout level for page-wide tracking. It uses position fixed and z-index 100 to stay visible above all content.

You've reached the end — the bar should be full!