- A Next.js Top Loading Bar component made using nprogress, works with Next.js 14.
using npm:
npm install nextjs-toploaderusing yarn:
yarn add nextjs-toploaderimport using:
import NextTopLoader from 'nextjs-toploader';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> ); }For rendering add <NextTopLoader /> to your return() in MyApp():
import NextTopLoader from 'nextjs-toploader'; export default function MyApp({ Component, pageProps }) { return ( <> <NextTopLoader /> <Component {...pageProps} />; </> ); }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 inmseasing: 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
