zeropost-web/components/ReadingProgress.js

'use client';
import { useEffect, useState } from 'react';

export default function ReadingProgress() {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const calc = () => {
      const doc = document.documentElement;
      const total = doc.scrollHeight - doc.clientHeight;
      const scrolled = window.scrollY;
      setProgress(total > 0 ? Math.min(100, (scrolled / total) * 100) : 0);
    };
    calc();
    window.addEventListener('scroll', calc, { passive: true });
    window.addEventListener('resize', calc);
    return () => {
      window.removeEventListener('scroll', calc);
      window.removeEventListener('resize', calc);
    };
  }, []);

  return (
    <div
      className="fixed top-0 left-0 right-0 z-40 pointer-events-none"
      style={{ paddingTop: 'env(safe-area-inset-top)' }}
    >
      <div
        className="h-[3px] origin-left transition-transform duration-100"
        style={{
          background: 'rgb(var(--accent))',
          transform: `scaleX(${progress / 100})`,
        }}
      />
    </div>
  );
}