If you are building a Next.js application or any Server Side Rendering (SSR) app, it looks incredible if there is a progress bar that shows the progress while loading a new page.

I am currently(Jun 2022) building my portfolio and I wanted to add a progress bar component because if I don’t make a component that can be modified easily by passing the props, it would be useless because I have to redo all the work for all the new apps. So I ended up creating an @uiuxarghya/progress-bar.

To add a Progress Bar in a React Site (especially Next.Js) using @uiuxarghya/progress-bar, you can follow the given steps...

1. Installing the @uiuxarghya/progress-bar package

npm i @uiuxarghya/progress-bar
or
yarn add @uiuxarghya/progress-bar

2. Modify your App.js (_app.js for Next.Js) file

Note: This will enable the progress-bar on all pages. For any specific page just import in that page only.

Import the package and create a progress bar instance:

import ProgressBar from '@uiuxarghya/progress-bar';

const progress = new ProgressBar();

Show the progress bar and begin animating it by calling the .start() method:

progress.start();

End the progress bar animation by calling the .finish() method:

setTimeout(() => {
  progress.finish();
}, 1000);

You can reuse a progress instance multiple times - every time .start() gets called the progress bar starts animation from scratch.

3. Tada 🎉! You got a pretty nice and clean progress-bar

Customization

The progress bar's appearance and behavior can be (slightly) customized with constructor parameters. Here are the different options and their default values:

const progress = new ProgressBar({
  // The size (height) of the progress bar.
  // Numeric values get converted to px.
  size: 2,

  // Color of the progress bar.
  // Also used for the glow around the bar.
  color: '#0cf',

  // Class name used for the progress bar element.
  className: 'progress-bar',

  // How many milliseconds to wait before the progress bar
  // animation starts after calling .start().
  delay: 80,
});

The final code will look like

App.js ( for React )

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import ProgressBar from '@uiuxarghya/progress-bar';

const progress = new ProgressBar({
  size: 4,
  color: '#3B82F6',
  className: 'progress-bar',
  delay: 100,
});

const App = () => {
  progress.start();
  setTimeout(() => {
    progress.finish();
  }, 1000);

  return <p>Progress Bar Demo</p>;
};

ReactDOM.render(<App />, document.getElementById('root'));

_app.js ( for Next.Js)

import React from "react";
import "../styles/globals.css";
import ProgressBar from "@uiuxarghya/progress-bar";
import { useEffect } from "react";

const progress = new ProgressBar({
  size: 4,
  color: "#3B82F6",
  className: "fff",
  delay: 100,
});

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    progress.start();
    setTimeout(() => {
      progress.finish();
    }, 1000);
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

⁠Feel free to reach out to me if you encounter any problems.