We are going to create this scroll bar using React and Dom API

You can see the demo codesandbox.io/s/staging-morning-nu3r2?file..

prerequisite

• Basic React expertise
• Basic of Javascript

We are going to create this progress bar using a custom hook in which I will create some functions to calculate total page height and Scroll Percentage.

Lets create a function to find total page height.

To find the total page height we need to first find the inner width of the page.

const totalPageHeigth = () => {
  const windowHeigth = window.innerHeight;
}

after finding we can find the scroll height or the document height, suppose the elements inside the JSX or in Html.

const totalPageHeigth = () => {
  const windowHeigth = window.innerHeight;
  const docHeight = document.documentElement.scrollHeight;

  return docHeight - window height; // by subtracting we can find the PageHeigth
};

}

we can use document.documentElement.scrollHeight to find the scroll document hiegth.

Lets find the scroll percentage with help of totalPageHeight function.

So first we need to find the page's offset.

const calcScrollPerc= ( ) => {

const yOffsetPage = window.pageYOffset;

}

Here we used page offset to calculate the offset of the document.

now we calculate the percentage.

const calcScrollPerc = () => {
  const scrollOffset = window.pageYOffset;
  console.log(scrollOffset); // to check the offset
  const scrollPerc = Math.floor((scrollOffset / totalPageHeigth()) * 100); //using floor 
  console.log(`Scroll percentage${scrollPerc}`); // to check the percentage
  return scrollPerc;
};

Now we have Scroll percentage and we can use it in our custom hook

Creating custom hook useScroll()

We need a useState and useEffect hook to create a custom hook

export const useScroll = () => {
  const [percScrolled, stPercScrolled] = useState(0);

  useEffect(() => {
    const scroll = () => stPercScrolled(calcScrollPerc());
    document.addEventListener("scroll", scroll);

    return () => document.removeEventListener("scroll", scroll);
  }, []);
  return percScrolled;
};

In the above hook, we are using a state to store the scroll percentage and we are using a useEffect hook because we are working with the domAPI, and it's a side effect. We are cleaning the side-effect with the cleanup function.

Now We can use this hook in our component which we can use anywhere in our react project.

Creating the progress bar Component

export const ProgressBar = () => {
  const percentScroll = useScroll();

  return (
    <div
      style={{
        width: percentScroll + "%",
        position: "fixed",
        background:
          "linear-gradient( 90deg,rgb(157,134,233) 0%,rgb(97,218,251) 100% )",
        height: "5px",
        top: 0,
        left: 0,
        right: 0,

        zIndex: 10,
        scrollBehavior: "smooth",
      }}></div>
  );
};

we are creating a progress bar component so we can use it in another component. We are using our useScroll and creating a div element to show the progress bar over the top of the element with a fixed position.

Now we are ready to use this component in other components. DEMO LINK https://codesandbox.io/s/staging-morning-nu3r2?file=/src/App.js

Till Then Show some Love 😍 and keep coding ✊