Posted onDec 27, 2023

Add router progress bar in Next Js 14

Get Started

I struggled to implement a loading indicator in my Next.js 13 and Now.js 14 apps. With the Next.js App router, many progress bar packages became ineffective. But after some research, I found a working package that was updated recently and works perfectly in the Next.js 14 app router.

It doesn't matter if you already have a fully functional Next.js app or are creating a new one. First you need to install thenextjs-toploader package.

npm i nextjs-toploader

yarn add nextjs-toploader

app/layout.tsx or app/layout.jsx

importNextTopLoaderfrom'nextjs-toploader';exportdefaultfunctionRootLayout({children}:{children:React.ReactNode,}){return(<htmllang='en'><body><NextTopLoader/> // Just need to add this line{children}</body></html>);}

Customizations

To customize your progress bar you can add these props to yourNextTopLoader and change the values.

<NextTopLoadercolor="#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"/>

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 tofalse to 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)