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.
You can install the package using npm:
npm install next-transition-barOr if you prefer using yarn:
yarn add next-transition-barStart by importing the package:
import NextTransitionBar from 'next-transition-bar';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>
);
}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} />;
</>
);
}To import nprogress from 'next-transition-bar':
import { nprogress } from 'next-transition-bar';or both
import NextTransitionBar, { nprogress } from 'next-transition-bar';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 tofalseto 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 thestyletag.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.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent