Docs
Scroll Progress
Scroll Progress
A customizable scroll progress indicator that shows reading progress with smooth animations and multiple positioning options.
You can see the scroll progress bar at the bottom of the page.
Overview
The Scroll Progress component provides visual feedback on reading progress, helping users navigate long-form content and understand their position within articles or documentation. It enhances user engagement by reducing uncertainty about content length and encouraging completion of reading tasks. Perfect for blogs, documentation sites, and any content-heavy interfaces where user retention matters.
Installation
pnpm dlx shadcn@latest add https://deltacomponents.dev/r/scroll-progress.json
Usage
"use client"
import { ScrollProgress } from "@/registry/components/scroll-progress"
export function Component() {
return (
<ScrollProgress position="top" height={4} color="hsl(var(--primary))" />
)
}API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
position | "top" | "bottom" | "top" | Position of the progress bar |
height | number | 4 | Height of the progress bar in pixels |
color | string | "hsl(var(--primary))" | Color of the progress bar |
className | string | "" | Additional CSS classes |
showPercentage | boolean | false | Whether to show percentage text |
smooth | boolean | true | Whether to use smooth animation |
Examples
Basic Progress Indicator
A simple scroll progress bar positioned at the top of the viewport with default styling.
You can see the scroll progress bar at the bottom of the page.
