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 the nextjs-toploader package.
npm i nextjs-toploader
or
yarn add nextjs-toploader
app/layout.tsx or app/layout.jsx
import NextTopLoader from 'nextjs-toploader';
export default function RootLayout({
children
}: {
children: React.ReactNode,
}) {
return (
<html lang='en'>
<body>
<NextTopLoader /> // Just need to add this line
{children}
</body>
</html>
);
}
Customizations
To customize your progress bar you can add these props to your NextTopLoader and change the values.
<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"
/>
-
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)
Happy coding :)
Top comments (0)