how to use top loader bar in react js App

Question

I am new in react js I want to implement npm i react-top-loading-bar in my react app. I am using react class function component. i want to implement that see the picture if anyone clicks on the Navigation link then it will show a loading bar at the top

if anyone know that how to implement this please let me know, it is very helpful for me

navbar.js

import React, { useEffect } from 'react'
import { Link, useLocation } from 'react-router-dom'
import './Navbar.css'
import LoginRounded from '@mui/icons-material/LoginRounded'
import Button from '@mui/material/Button';


const Navbar = () => {
  
  //Navbar active color change
  let location = useLocation();
  useEffect(() => {
  }, [location]);


  return (
    <div>
      <nav className="navbar navbar-expand-lg navbar-dark" style={{ backgroundColor: "#063970" }}>
        <div className="container-fluid">
          <Link className="navbar-brand" to="/">Evalue Content</Link>
          <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav me-auto mb-2 mb-lg-0">
              <li className="nav-item">
                <Link className={`nav-link ${location.pathname === "/" ? "active" : ""}`} to="/">Home</Link>
              </li>
              <li className="nav-item"><Link className={`nav-link ${location.pathname === "/service" ? "active" : ""}`} to="/service">Service</Link></li>
              <li className="nav-item"><Link className={`nav-link ${location.pathname === "/contact" ? "active" : ""}`} to="/contact">contact us</Link></li>

            </ul>
            <Button component={Link} to="/Login" variant="contained" size="medium" startIcon={<LoginRounded />} sx={{ marginLeft: 'auto' }} >Login</Button>
          </div>
        </div>
      </nav>
    </div>
  )
}





export default Navbar

App.js

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import Navbar from './components/Navbar';
import Contact from './components/Contact';
import Service from './components/Service'
import Login from './components/Login';
// Redirect to their dashboar
import Admin from './components/dashboard/Admin';
import Employee from './components/dashboard/Employee';
import Publisher from './components/dashboard/Publisher';
//Toast error message show
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import Reset from './components/Reset';
import Newpassword from './components/Newpassword';

//admin Routes
import Project from './components/dashboard/AdminPages/Project'
import User from './components/dashboard/AdminPages/User';

function App() {

  return (
    <div>

      <Router>
        <Navbar />
        <Routes>

          <Route exact path="/" element={<Home />} />
          <Route exact path="/service" element={<Service />} />
          <Route exact path="/contact" element={<Contact />} />
          <Route exact path="/login" element={<Login />} />
          <Route exact path="/reset" element={<Reset />} />
          <Route exact path="/reset/:token" element={<Newpassword />} />
          {/* Redirect to their dashboard */}
          <Route exact path="/admin" element={<Admin />} />
          <Route exact path="/employee" element={<Employee />} />
          <Route exact path="/publisher" element={<Publisher />} />
          {/* admin pages */}
          <Route exact path="/publisher" element={<Project />} />
          <Route exact path="/user" element={<User />} />

        </Routes>
      </Router>

      <ToastContainer
        position="top-right"
        autoClose={4000}
        hideProgressBar={false}
        newestOnTop={false}
        closeOnClick
        rtl={false}
        pauseOnFocusLoss
        draggable
        pauseOnHover
      />
    </div>
  );
}

export default App;

score 0 · Answer 1 · answered Apr 07 '22 at 14:35

Loading bar is not useful thing in React, because React is one page website and all the data is shown in your website is already downloaded from the server. However, we all use this for inner peace, and it gives a good user experience. To solve this problem, you need to follow a few steps.

Install this below given line in your terminal.

npm i react-top-loading-bar

Import Loading bar from react top.

import LoadingBar from 'react-top-loading-bar Copy this line and paste it in your "app.js" file.

Now for loading bar we need color, progress, and onLoaderFinisher. Put this lines wherevery you want the LoadingBar, mostly people prefer below the Navbar.

<LoadingBar
        color='#f11946'
        progress={progress}
/>

Also, You have to add setProgress() method, which helps to change the progress.

state={
prgress:0
}
setProgress = (progress) =>{
this.setState({this.state.progress:progress})
}

Now, you have to pass this method to your component. Here, you are using multiple component such as, Home, Service, Contact, and many more. So, pass this method with every component. i.g.

<Route exact path="/" element={<Home setProgress={this.setProgress} />} />

This is consider as a props, so now where you want to show your progress bar just use as a props. like,

this.props.setProgress(0);
//then put your code here in middle, where your data is fetch/ shown, where your process takes a few seconds, and then
this.props.setProgress(100);

how to use top loader bar in react js App

1 Answers1