How to add a Top Loading Bar in any Website

What is Top Loading Bar-

A top loading bar is a UI component that indicates the progress of an operation or task in a React project. It typically appears at the top of the page and shows a horizontal bar that fills up from left to right to represent the progress of the task. The loading bar is commonly used to indicate the progress of loading content, processing user input, or any other long-running operation.

In React, you can use packages like react-top-loading-bar or react-loadingg to add a top loading bar to your project. These packages provide pre-built components that you can customize to fit your project's design and functionality requirements. You can also implement your own loading bar component using HTML, CSS, and JavaScript if you prefer a more customized approach.

A top loading bar can improve the user experience by providing visual feedback that the system is working on a task, which can help reduce user frustration and improve engagement. Additionally, a loading bar can give users an idea of how much longer they need to wait before the task is complete, which can help manage their expectations and reduce uncertainty.

How to use top loading bar-

1. Install the package: You can install the react-top-loading-bar package using either npm or yarn.

npm install react-top-loading-bar
               or
npm i react-top-loading-bar

or

yarn add react-top-loading-bar

1. Import the package: Import the LoadingBar component from the package.

import LoadingBar from 'react-top-loading-bar';

1. Set up the component: Add the LoadingBar component to your main App component and set the progress prop to a state variable that will keep track of the loading progress. You can customize the color of the loading bar by passing in a color prop.

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

  return (
    <div>
      <LoadingBar 
         height=2
         color='#f11946' 
         progress={progress} 
      />
      <Navbar/>
    </div>
  );
}

1. Update the progress: As your content loads, update the progress state variable to update the progress of the loading bar.

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

const handleLoad = () => {
  // Start loading
  setProgress(30);

  // Simulate loading progress
  setTimeout(() => {
    setProgress(60);
  }, 1000);

  // Finish loading
  setTimeout(() => {
    setProgress(100);
  }, 2000);
};

In the code above, handleLoad() is a function that simulates the loading process by updating the progress state variable. You can replace this function with your own loading logic.

That's it! With these steps, you should have successfully added a top loading bar to your React project using the react-top-loading-bar package.