How to Add a Top Loading Bar in React

In this blog post, we will learn how to add a top loading bar in React using the `react-top-loading-bar` package. The `react-top-loading-bar` package provides a simple and customizable loading bar component that can be easily integrated into your React applications.

Demo Application

Output - How to Add a Top Loading Bar in React - Clue Mediator

Steps to Add a Top Loading Bar in React

1. Project structure
2. Package dependencies
3. Implementation
4. Output

1. Project structure

• react-loading-bar

  • node_modules

  • public

    • index.html

  • src

    • App.js
    • index.css
    • index.js

  • package-lock.json

  • package.json

  • README.md

2. Package dependencies

To get started, we need to install the react-top-loading-bar package in our React project. Open your terminal and run the following command:

npm i react-top-loading-bar

You will find the version of the following packages in React application.

react

^18.2.0

react-top-loading-bar

^2.3.1

3. Implementation

Next, we need to import the LoadingBar component from the react-top-loading-bar package into our React component. Add the following import statement at the top of your file:

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

Now, let's add the LoadingBar component to your React component using the progress variable. Here's an example:

App.js

import React, { useState } from 'react';
import LoadingBar from 'react-top-loading-bar';

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

  return (
    <div>
      <h3>How to Add a Top Loading Bar in React - <a href="https://cluemediator.com" target="_blank" rel="noopener">Clue Mediator</a></h3>
      <loadingbar color="#f11946" height={3} progress={progress} onloaderfinished="{()" ==""> setProgress(0)}
      />
      <button onclick="{()" ==""> setProgress(val => val + 10)}>Add 10%</button>
      <button onclick="{()" ==""> setProgress(val => val + 20)}>Add 20%</button>
      <button onclick="{()" ==""> setProgress(100)}>Complete</button>
    </loadingbar></div>
  );
};

export default App;

In this example, we use the `useState` hook to create a `progress` state variable that represents the loading progress. We have added three buttons. These buttons are used to simulate different loading scenarios. When clicked, they call the `setProgress` function to update the `progress` value accordingly.

4. Output

Run your application and check the output in the browser.
Live Demo

Conclusion

Adding a top loading bar in React can greatly improve the user experience by providing visual feedback during loading operations. The react-top-loading-bar package makes it easy to integrate a customizable loading bar component into your React applications. In this blog post, we learned the steps to add a top loading bar using the react-top-loading-bar package with the progress variable. Give it a try and enhance your React applications with a sleek and functional loading bar!

That's it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

GitHub Repository StackBlitz Project