A scroll progress indicator that tracks how far a user has scrolled through the page or a scrollable container, with vertical/horizontal and width/scale display modes.
"use client";
import * as React from "react";
import * as Motion from "motion/react";
import {
ScrollProgressProvider,
ScrollProgress,
ScrollProgressContainer,
} from "@/components/ui/scroll-progress";
export default function ScrollProgressDemo() {
return (
<div className="relative h-[440px] w-full overflow-hidden rounded-xl border">
<ScrollProgressProvider direction="vertical">
<div className="z-50 absolute bottom-3 left-3 right-3">
<ScrollProgress className="bg-foreground h-1.5 data-[global=false]:rounded-full" />
</div>
<ScrollProgressContainer className="w-full h-full data-[direction=vertical]:overflow-y-auto data-[direction=horizontal]:overflow-x-auto">
<div className="flex flex-col">
<div className="w-full h-[400px] shrink-0 flex items-center justify-center">
<p className="flex items-center gap-2 font-medium">
Scroll to see the progress bar{" "}
<Motion.motion.span
className="text-xl leading-none"
animate={{ y: [3, -3, 3] }}
transition={{
duration: 1.25,
repeat: Infinity,
ease: "easeInOut",
type: "keyframes",
}}
>
↓
</Motion.motion.span>
</p>
</div>
<div className="w-full h-[400px] shrink-0 p-3">
<div className="size-full bg-accent rounded-xl" />
</div>
<div className="w-full h-[400px] shrink-0" />
<div className="w-full h-[400px] shrink-0 p-3">
<div className="size-full bg-accent rounded-xl" />
</div>
<div className="w-full h-[400px] shrink-0" />
</div>
</ScrollProgressContainer>
</ScrollProgressProvider>
</div>
);
}