next-transition-bar

v1.1.1

Published

4 months ago

Progress-bar component for Next.js app.

Downloads

570

0High
0Medium
0Low

mahmudul_alam

Nprogress Next Next.js Next.js 13 Next.js 14 app router Progressbar Next topbar progress Nprogress React nprogress top loading indicator Transition bar

Next Transition Bar

Elevate the user experience in your Next.js applications effortlessly with next-transition-bar – a versatile npm package designed to seamlessly enhance page transition progress. This lightweight and customizable solution adds a top loader and progress bar, delivering both visual appeal and a smooth transition experience.

Live Demo

Installation

You can install the package using npm:

npm install next-transition-bar

Or if you prefer using yarn:

yarn add next-transition-bar

Usage

Start by importing the package:

import NextTransitionBar from 'next-transition-bar';

Integration with `app/layout.js` (for `app` folder structure)

Include <NextTransitionBar /> within the return() statement inside the <body></body> of your RootLayout():

import NextTransitionBar from 'next-transition-bar';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <NextTransitionBar />
        {children}
      </body>
    </html>
  );
}

Integration with `pages/_app.js` (for `pages` folder structure)

To render, add <NextTransitionBar /> within the return() statement in MyApp():

import NextTransitionBar from 'next-transition-bar';

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <NextTransitionBar />
      <Component {...pageProps} />;
    </>
  );
}

Importing nprogress instance

To import nprogress from 'next-transition-bar':

import { nprogress } from 'next-transition-bar';

or both

import NextTransitionBar, { nprogress } from 'next-transition-bar';

Default Configuration

If no props are passed to <NextTransitionBar />, the package applies the following default configuration:

<NextTransitionBar
  color="#29d"
  initialPosition={0.08}
  trickleSpeed={200}
  height={3}
  trickle={true}
  showSpinner={true}
  easing="ease"
  speed={200}
  shadow="0 0 10px #29d, 0 0 5px #29d"
  template='<div class="bar" role="bar"><div class="peg"></div></div>
            <div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
  zIndex={1600}
  showAtBottom={false}
  isRTL={false}
  nonce={undefined}
  transformCSS={(css) => <style nonce={undefined}>{css}</style>}
/>

color: Change the default color of the top loader.
initialPosition: Adjust the initial position of the top loader (in percentage, e.g., 0.08 = 8%).
trickleSpeed: Incremental delay speed in milliseconds.
speed: Animation speed for the top loader in milliseconds.
easing: Animation settings using easing (a CSS easing string).
height: Height of the top loader in pixels.
trickle: Auto-incrementing behavior for the top loader.
showSpinner: Toggle spinner visibility.
shadow: A smooth shadow for the top loader (set to false to disable it).
template: Include custom HTML attributes for the top loader.
zIndex: Define zIndex for the top loader.
showAtBottom: Display the top loader at the bottom (increase height to ensure visibility on mobile devices).
isRTL: Change the direction of the loader.
nonce: The nonce attribute to use for the style tag.
transformCSS: This is useful if you want to use a different style or minify the CSS.

Experience a sleek and visually appealing progress bar with next-transition-bar. Customize it to suit your application's unique style and provide users with a delightful journey through your Next.js app.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme