20 lines
494 B
TypeScript
20 lines
494 B
TypeScript
"use client";
|
|
|
|
import * as React from "react";
|
|
import { motion, useScroll } from "motion/react";
|
|
|
|
export function ScrollProgressBar({ className = "" }: { className?: string }) {
|
|
const { scrollYProgress } = useScroll();
|
|
return (
|
|
<motion.div
|
|
aria-hidden
|
|
className={`fixed left-0 right-0 top-20 h-px z-[60] ${className}`}
|
|
>
|
|
<motion.div
|
|
className="h-full origin-left bg-primary/30"
|
|
style={{ scaleX: scrollYProgress }}
|
|
/>
|
|
</motion.div>
|
|
);
|
|
}
|