2 min read

How to add a Progress Bar in a React Site - Next.Js Site

How to add a Progress Bar in a React Site - Next.Js Site

To add a Progress Bar in a React Site (especially Next.Js) you can simply follow the given steps...

1. Install @uiuxarghya/progress-bar package

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

Depending on your package manager install the package with this command.

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.

Avatar
Arghya Ghosh
GitHubTwitter

I'm a junior designer developer based in Kolkata, India. I'm a self-taught developer, and I love learning & creating new things.

You may also like