36 lines
959 B
TypeScript
36 lines
959 B
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
export function ReadingProgress() {
|
|
const [progress, setProgress] = useState(0);
|
|
|
|
useEffect(() => {
|
|
if (window.CSS?.supports("animation-timeline", "scroll()")) {
|
|
return;
|
|
}
|
|
|
|
const update = () => {
|
|
const article = document.querySelector("article");
|
|
if (!article) return;
|
|
const rect = article.getBoundingClientRect();
|
|
const total = article.scrollHeight;
|
|
const scrolled = Math.max(0, -rect.top + window.innerHeight * 0.3);
|
|
setProgress(total > 0 ? Math.min(100, (scrolled / total) * 100) : 0);
|
|
};
|
|
|
|
update();
|
|
window.addEventListener("scroll", update, { passive: true });
|
|
return () => window.removeEventListener("scroll", update);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="reading-progress hidden lg:block">
|
|
<div
|
|
className="reading-progress-fill"
|
|
style={{ height: `${progress}%` }}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|