How to: Make a Scroll Progress Bar in React and TailwindCSS.

In this tutorial, we will learn how to create a scroll progress bar in React using TailwindCSS and React hooks. A scroll progress bar is a visual indicator that shows the progress of the user as they scroll through a page. It can be a useful tool to help users navigate long pages and provide feedback on their progress.

What are we building?

When scrolling on this page, you will see a progress bar at the top of the screen that indicates how far you have scrolled through the content. The progress bar will update in real-time as you scroll up and down the page. That's what we are going to build in this guide.

Different Elements of the Progress Bar

To make this bar, there are 3 elements that we need to create:

• The progress bar itself
• The hook to calculate the scroll progress
• The component to display the progress bar, this usually is a parent component that wraps the content of the page.

The Progress Bar

When making the progress bar, we will use TailwindCSS to style the bar. We will create a span element that will represent the progress bar. The width of this element will be determined by the scroll progress.

"use client";
 
import React from "react";
 
import { useScrollProgress } from "@/hooks/use-scroll-progress";
 
interface ProgressBarProps extends React.HTMLAttributes<HTMLSpanElement> {}
 
export const ProgressBar = (props: ProgressBarProps) => {
  const progress = useScrollProgress();
  return (
    <span
      className="fixed top-0 left-0 h-1 bg-indigo-500"
      style={{ width: `${progress}%`, transition: "width 0.1s ease" }}
      {...props}
    />
  );
};

The Hook

The hook to calculate the scroll progress is a custom hook that uses React's useState and useEffect hooks to keep track of the scroll progress. The hook will return a number between 0 and 100 that represents the scroll progress as a percentage.

"use client";
 
import { useEffect, useState } from "react";
 
export const useScrollProgress = () => {
  const [progress, setProgress] = useState<number>(0);
 
  useEffect(() => {
    const handleScroll = () => {
      const scrollPosition = window.scrollY;
      const windowHeight = window.innerHeight;
      const documentHeight = document.body.scrollHeight;
 
      const scrollPercent = (scrollPosition / (documentHeight - windowHeight)) * 100;
      setProgress(scrollPercent);
    };
 
    window.addEventListener("scroll", handleScroll);
 
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);
 
  return progress;
};

The Parent Component

The parent component is the component that wraps the content of the page and includes the progress bar. This component will render the progress bar and the content of the page.

export default function Page() {
  return (
    <>
      <ProgressBar className={/** custom styling for this page */} />
      <main>{/* Content of the page */}</main>
    </>
  );
}

Conclusion

To make a scroll progress bar in React, you need to create a progress bar component, a hook to calculate the scroll progress, and a parent component that includes the progress bar and the content of the page. By following this guide, you can create a scroll progress bar that updates in real-time as the user scrolls through the page. This can be a useful tool to help users navigate long pages and provide feedback on their progress. Happy coding! 🚀