Note: This project is still in development and has not been publicly released. Coming soon.
Docs
Scroll Progress
Scroll Progress

A customizable scroll progress indicator that shows reading progress with smooth animations and multiple positioning options.

20 views
2 downloads
Loading...

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

Basic Usage

1"use client"
2
3import ScrollProgress from "@/registry/components/scroll-progress"
4
5export function Component() {
6 return <ScrollProgress position="top" height={4} color="#3b82f6" />
7}

Content-Based Progress

Track progress through specific content by wrapping it with the ScrollProgress component:

1"use client"
2
3import ScrollProgress from "@/registry/components/scroll-progress"
4
5export function ArticleWithProgress() {
6 return (
7 <ScrollProgress height={6} color="#3b82f6" position="top">
8 <article>
9 <h1>Your Article Title</h1>
10 <p>Your article content...</p>
11 {/* Progress will track through this content */}
12 </article>
13 </ScrollProgress>
14 )
15}

API Reference

Props

PropTypeDefaultDescription
position"top" | "bottom""bottom"Position of the progress bar
heightnumber4Height of the progress bar in pixels
colorstringundefinedCustom color for the progress bar
variant"default" | "secondary" | "destructive" | "outline""default"Preset color variant when color is not specified
classNamestring""Additional CSS classes
childrenReact.ReactNodeundefinedContent to track progress through
absolutebooleanfalseUse absolute positioning instead of fixed
containerRefReact.RefObject<HTMLDivElement>undefinedReference to scroll container
springOptionsSpringOptionsundefinedCustom spring animation options

Examples

Article Progress Tracking

Track reading progress through article content with a custom styled progress bar.

Note: The scroll progress bar will be displayed at the top of the page during this demo.

Loading...