Scroll Progress

1"use client"
2 
3import { motion, useScroll } from "motion/react"
4import { cn } from "@/lib/utils"
5 
6interface ScrollProgressProps extends React.ComponentProps<typeof motion.div> {
7  /**
8   * Height of the progress bar in pixels
9   * @default 2
10   */
11  height?: number
12  /**
13   * Color of the progress bar
14   * @default "bg-primary"
15   */
16  color?: string
17  /**
18   * Position of the progress bar
19   * @default "top"
20   */
21  position?: "top" | "bottom"
22  /**
23   * Container element to track scroll progress for
24   * If not provided, tracks the entire viewport
25   */
26  container?: React.RefObject<HTMLElement | null>
27}
28 
29function ScrollProgress({
30  height = 4,
31  color = "bg-primary",
32  position = "top",
33  className,
34  container,
35  ...props
36}: ScrollProgressProps) {
37  const { scrollYProgress } = useScroll({
38    container: container as any,
39  })
40 
41  return (
42    <motion.div
43      data-slot="scroll-progress"
44      className={cn(
45        "left-0 right-0 z-50 origin-left",
46        // Use fixed positioning for viewport scroll, allow override for container scroll
47        !container && "fixed",
48        position === "top" ? "top-0" : "bottom-0",
49        color,
50        className,
51      )}
52      style={{
53        scaleX: scrollYProgress,
54        height: `${height}px`,
55      }}
56      {...props}
57    />
58  )
59}
60 
61export { ScrollProgress }