ProgressBar for Next.js

This package provides a simple and customizable progress bar for page transitions in Next.js applications using the App Router.

Installation

npm install nextjs-page-transition-bar

Usage

Basic Example

import ProgressBar from 'nextjs-page-transition-bar';

const Example: React.FC = () => {
  return (
    <>
      <ProgressBar color="#29D" height="4px" position="top" />
      <div>
        <h1>Welcome</h1>
        <p>Navigate between pages to see the progress bar in action.</p>
      </div>
    </>
  );
};

export default Example;

Customization

You can customize the ProgressBar component using the following props:

• color: The color of the progress bar (default: #29D).
• height: The height of the progress bar (default: 4px).
• position: The position of the progress bar (top or bottom, default: top).

Example:

<ProgressBar color="#FF5733" height="5px" position="bottom" />

License

MIT