Creating a Gradient Reading Progress Bar in NextJS with TailwindCSS

1import { useEffect, useState } from "react";
2import { useRouter } from "next/router";
3
4/**
5 * React Hook to get the scroll percentage from the page, returns value from 0 to 100
6 */
7export function useReadingProgress() {
8  const [completion, setCompletion] = useState(0);
9  const router = useRouter();
10
11  useEffect(() => {
12    function updateScrollCompletion() {
13      // see how much we have scrolled
14      const currentProgress = window.scrollY;
15      // see how much total scroll is available
16      const scrollHeight = document.body.scrollHeight - window.innerHeight;
17      if (scrollHeight) {
18        setCompletion(
19          Number((currentProgress / scrollHeight).toFixed(2)) * 100
20        );
21      }
22    }
23
24    function handleRouteChange() {
25      setCompletion(0); // Reset completion when the route changes
26    }
27
28    // Add scroll and route change event listeners
29    window.addEventListener("scroll", updateScrollCompletion);
30    router.events.on("routeChangeStart", handleRouteChange);
31
32    // Remove event listeners on unmount
33    return () => {
34      window.removeEventListener("scroll", updateScrollCompletion);
35      router.events.off("routeChangeStart", handleRouteChange);
36    };
37  }, [router]);
38
39  return completion;
40}

1import { useReadingProgress } from "~/hooks/useReadingProgressbar";
2
3export default function Header() {
4  const completion = useReadingProgress();
5
6  return (
7    <header
8      style={{
9        backgroundSize: `${completion}%`,
10        backgroundRepeat: "no-repeat",
11      }}
12      className="sticky top-0 h-14 w-full bg-gradient-to-r from-red-500/30 from-30% to-blue-500/50 to-100% backdrop-blur-sm transition-all duration-500 ease-in-out "
13    >
14      <div className="text-center text-white">Header</div>
15    </header>
16  );
17}