Next Js TopLoader
- A Next.js Top Loading Bar component made using nprogress, works with Next.js 14.
Install
using npm:
npm install nextjs-toploaderusing yarn:
yarn add nextjs-toploaderUsage
import using:
import NextTopLoader from 'nextjs-toploader';Usage with app/layout.js for app folder structure
For rendering add <NextTopLoader /> to your return() inside the <body></body> of RootLayout():
import NextTopLoader from 'nextjs-toploader';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<NextTopLoader />
{children}
</body>
</html>
);
}Usage with pages/_app.js for pages folder structure
For rendering add <NextTopLoader /> to your return() in MyApp():
import NextTopLoader from 'nextjs-toploader';
export default function MyApp({ Component, pageProps }) {
return (
<>
<NextTopLoader />
<Component {...pageProps} />;
</>
);
}Default Configuration
If no props are passed to <NextTopLoader />, below is the default configuration applied.
<NextTopLoader
color="#2299DD"
initialPosition={0.08}
crawlSpeed={200}
height={3}
crawl={true}
showSpinner={true}
easing="ease"
speed={200}
shadow="0 0 10px #2299DD,0 0 5px #2299DD"
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}
/>-
color: to change the default color of TopLoader. -
initialPosition: to change initial position for the TopLoader in percentage, :0.08 = 8%. -
crawlSpeed: increment delay speed inms. -
speed: animation speed for the TopLoader inms -
easing: animation settings using easing (a CSS easing string). -
height: height of TopLoader inpx. -
crawl: auto incrementing behavior for the TopLoader. -
showSpinner: to show spinner or not. -
shadow: a smooth shadow for the TopLoader. (set tofalseto disable it) -
template: to include custom HTML attributes for the TopLoader. -
zIndex: defines zIndex for the TopLoader. -
showAtBottom: To show the TopLoader at bottom. (increase height for the TopLoader to ensure it's visibility at the mobile devices)
UPI ID: thesgj@sbi
