To add a Progress Bar in a React Site (especially Next.Js) you can simply follow the given steps...\n1. Install \n@uiuxarghya/progress-bar\n package \n$ npm i @uiuxarghya/progress-bar\nor\n$ yarn add @uiuxarghya/progress-bar\nDepending on your package manager install the package with this command.\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\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.

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

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