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.\n\nI 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 \n@uiuxarghya/progress-bar\n.\nTo add a Progress Bar in a React Site (especially Next.Js) using \n@uiuxarghya/progress-bar\n, you can follow the given steps...\n1. Installing the \n@uiuxarghya/progress-bar\n package \nnpm i @uiuxarghya/progress-bar
or
yarn add @uiuxarghya/progress-bar\n2. Modify your App.js (_app.js for Next.Js) file\nNote:\n This will enable the progress-bar on all pages. For any specific page just import in that page only.\nImport the package and create a progress bar instance:\nimport ProgressBar from '@uiuxarghya/progress-bar';

const progress = new ProgressBar();\nShow the progress bar and begin animating it by calling the \n.start()\n method:\nprogress.start();\nEnd the progress bar animation by calling the \n.finish()\n method:\nsetTimeout(() => {
  progress.finish();
}, 1000);\nYou can reuse a \nprogress\n instance multiple times - every time \n.start()\n gets called the progress bar starts animation from scratch.\n3. Tada 🎉!  You got a pretty nice and clean progress-bar\n\nCustomization\nThe progress bar's appearance and behavior can be (slightly) customized with constructor parameters. Here are the different options and their default values:\nconst 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,
});\nThe final code will look like\nApp.js ( for React )\nimport * 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'));\n_app.js ( for Next.Js)\nimport 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;\n⁠Feel free to \nreach out\n to me if you encounter any problems.

Learn how to add a progress bar in a React site (especially Next.js) using @uiuxarghya/progress-bar.

Recent Posts

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