A thin horizontal bar fixed to the top of the page that fills up as the user scrolls down, showing reading/scroll progress.
import ProgressIndicator from "@/components/ui/progress-indicator";
export default function ProgressIndicatorDemo() {
return (
<div className="w-full h-[200vh] bg-background text-foreground">
<ProgressIndicator color="bg-blue-500" height={4} />
<div className="max-w-2xl mx-auto py-24 px-6 space-y-6">
<h1 className="text-3xl font-bold">Scroll down to see progress</h1>
<p className="text-muted-foreground">
The thin bar fixed to the top of the viewport fills up as you scroll
through this page, giving a quick visual sense of how far through the
content you are.
</p>
{Array.from({ length: 8 }).map((_, i) => (
<p key={i} className="text-muted-foreground leading-relaxed">
Paragraph {i + 1}. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
))}
</div>
</div>
);
}