25 lines
763 B
TypeScript
25 lines
763 B
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
|
|
export function ScrollProgress() {
|
|
const [scrollProgress, setScrollProgress] = useState(0)
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
const totalHeight = document.documentElement.scrollHeight - window.innerHeight
|
|
const progress = (window.scrollY / totalHeight) * 100
|
|
setScrollProgress(Math.min(progress, 100))
|
|
}
|
|
|
|
window.addEventListener("scroll", handleScroll)
|
|
return () => window.removeEventListener("scroll", handleScroll)
|
|
}, [])
|
|
|
|
return (
|
|
<div className="fixed top-0 left-0 right-0 z-[60] h-1 bg-background/20">
|
|
<div className="h-full bg-primary transition-all duration-150 ease-out" style={{ width: `${scrollProgress}%` }} />
|
|
</div>
|
|
)
|
|
}
|