Page Progress Bar

The page progress bar is a thin line that appears at the top of the page to indicate the page progress as we scroll.

Preview

Scroll Down the page

Installation

PageProgressbar.tsx

"use client";

import * as React from "react";
import { useEffect, useState } from "react";
import { motion } from "framer-motion";

const PageProgressbar = () => {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const handleScroll = () => {
      const scrollTop = window.scrollY;
      const docHeight =
        document.documentElement.scrollHeight - window.innerHeight;
      const progress = (scrollTop / docHeight) * 100;
      setProgress(progress);
    };

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <motion.div
      className="fixed top-0 left-0 h-1 z-999 bg-primary"
      initial={{ width: 0 }}
      animate={{ width: `${progress}%` }}
      transition={{ type: "spring", stiffness: 100, damping: 20 }}
      style={{ width: `${progress}%` }}
    />
  );
};

export { PageProgressbar };

Usage

<PageProgressbar />