scroll-progress-default
0%
The Scroll Progess is showing at bottom
Customize the scroll progress component with different variants and options
"use client"
import { ScrollProgress } from "@/components/ui/backgrounds/scroll-progress"
export function DemoOne() {
return (
<div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-xl border">
<ScrollProgress
variant="rainbow"
size="lg"
position={"bottom"}
showPercentage
percentagePosition="left"
/>
<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>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/scroll-progress-default.json"Installation
pnpm dlx shadcn@latest add https://ui.dalim.in/r/styles/default/scroll-progress.json
Usage
import { ScrollProgress } from "@/components/ui/scroll-progress"<div className="relative h-screen w-full overflow-hidden">
<ScrollProgress variant={"ice"} showPercentage />
</div>API Reference
ScrollProgress
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | – | Additional Tailwind/CSS classes. |
variant | "default" | "rainbow" | "ocean" | "sunset" | "forest" | "monochrome" | "neon" | "fire" | "ice" | "gold" | "solid" | "custom" | "default" | Preset gradient style for the progress bar. |
size | "xs" | "sm" | "default" | "lg" | "xl" | "2xl" | "default" | Height of the progress bar. |
position | "top" | "bottom" | "top" | Position of the progress bar on the screen. |
rounded | "none" | "sm" | "default" | "lg" | "xl" | "full" | "none" | Rounding of the progress bar edges. |
glow | "none" | "sm" | "default" | "lg" | "xl" | "none" | Shadow/glow intensity around the progress bar. |
customGradient | string | – | Custom Tailwind gradient classes when variant="custom". |
springConfig | { stiffness?: number; damping?: number; restDelta?: number } | { stiffness: 200, damping: 50, restDelta: 0.001 } | Configuration for spring animation. |
showPercentage | boolean | false | Whether to show scroll percentage text. |
percentagePosition | "left" | "right" | "center" | "right" | Where to display the percentage label. |
container | React.RefObject<HTMLElement> | – | Optional scroll container to track instead of window. |