Loading...
"use client"
import { ScrollProgress } from "@/registry/aliimam/components/scroll-progress"
export function DemoOne() {
return (
<div className="flex h-full w-full items-center justify-center overflow-hidden border">
<ScrollProgress
variant="rainbow"
size="lg"
position={"bottom"}
showPercentage
percentagePosition="right"
/>
<div className="py-8 text-center">
<h1 className="mb-2 text-xl font-semibold">
The Scroll Progess is showing at bottom
</h1>
<p className="text-muted-foreground text-xs">
Customize the scroll progress component with different variants and
options
</p>
</div>
</div>
)
}
Installation
pnpm dlx shadcn@latest add https://aliimam.in/r/scroll-progress.json
Usage
import { ScrollProgress } from "@/components/ui/scroll-progress"Basic
<ScrollProgress />
---
Bottom Positioned Progress Bar
<ScrollProgress position="bottom" />
---
Custom Size & Rounded Corners
<ScrollProgress size="lg" rounded="full" />
---
Gradient Variants
<ScrollProgress variant="rainbow" />
<ScrollProgress variant="ocean" />
<ScrollProgress variant="sunset" />
---
With Glow Effect
<ScrollProgress variant="neon" glow="lg" />
---
Show Scroll Percentage
<ScrollProgress showPercentage />
---
Centered Percentage Indicator
<ScrollProgress
showPercentage
percentagePosition="center"
/>
---
Custom Gradient
<ScrollProgress
variant="custom"
customGradient="bg-gradient-to-r from-fuchsia-500 via-violet-500 to-cyan-500"
/>
---
Custom Spring Animation
<ScrollProgress
springConfig={{
stiffness: 120,
damping: 20,
}}
/>
---
Scroll Tracking Inside a Container
const ref = useRef<HTMLDivElement>(null)
return (
<div ref={ref} className="h-[400px] overflow-y-auto">
<ScrollProgress container={ref} />
{/* scrollable content */}
</div>
) Props
ScrollProgress Props
| Prop | Type | Default |
|---|---|---|
variant | "default" | "rainbow" | "ocean" | "sunset" | "forest" | "monochrome" | "neon" | "fire" | "ice" | "gold" | "solid" | "custom" | "default" |
size | "xs" | "sm" | "default" | "lg" | "xl" | "2xl" | "default" |
position | "top" | "bottom" | "top" |
rounded | "none" | "sm" | "default" | "lg" | "xl" | "full" | "none" |
glow | "none" | "sm" | "default" | "lg" | "xl" | "none" |
className | string | undefined |
customGradient | string | undefined |
springConfig | { stiffness?: number; damping?: number; restDelta?: number } | { stiffness: 200, damping: 50, restDelta: 0.001 } |
showPercentage | boolean | false |
percentagePosition | "left" | "right" | "center" | "right" |
container | React.RefObject<HTMLElement> | undefined |
savd