components/reading-progress.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export default function ReadingProgress() {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollable = document.body.scrollHeight - window.innerHeight;
+      if (scrollable > 0) {
+        setProgress((window.scrollY / scrollable) * 100);
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  return (
+    <div className="h-[3px] w-full bg-black/20">
+      <div
+        className="h-full transition-[width] duration-100"
+        style={{
+          width: `${progress}%`,
+          background:
+            "linear-gradient(90deg, rgba(255,255,255,0.9) 0%, rgba(180,230,255,0.75) 100%)",
+        }}
+      />
+    </div>
+  );
+}