A Next.js Top Loading Bar component made using nprogress, works with Next.js 15 and Next.js 14 and React.
npm install nextjs-toploader
Next Js TopLoader- A Next.js Top Loading Bar component made using nprogress, works with Next.js 14 and React.


using npm:
``bash`
npm install nextjs-toploader
using yarn:
`bash`
yarn add nextjs-toploader
import using:
`js`
import NextTopLoader from 'nextjs-toploader';
For rendering add to your return() inside the
of RootLayout():`js
import NextTopLoader from 'nextjs-toploader';export default function RootLayout({ children }) {
return (
{children}
);
}
`$3
For rendering add
to your return() in MyApp() (Recommended):`js
import { PagesTopLoader } from 'nextjs-toploader/pages';export default function MyApp({ Component, pageProps }) {
return (
<>
;
>
);
}
`You can also use
in pages router, but it's recommended to use for useRouter hook support from nextjs-toploader version 2.6.12 onwardsCompatibility with
useRouter hook$3
For triggering TopLoader when using
useRouter hook (app router):`js
// Import the useRouter hook from nextjs-toploader to trigger the TopLoaderimport { useRouter } from 'nextjs-toploader/app';
`Then simply use it in your code for example:
`js
const router = useRouter();
router.push('/some-page');
`$3
For triggering TopLoader when using
useRouter add to your return() in MyApp() :`js
import { PagesTopLoader } from 'nextjs-toploader/pages';export default function MyApp({ Component, pageProps }) {
return (
<>
;
>
);
}
`---
useTopLoader Hook
A custom hook for handling progress indicators using NextTopLoader.
Methods
| Name | Description |
| ----------------- | ------------------------------------------------------------------------------------------------------------------ |
| start | Starts the progress bar |
| done | Completes the progress bar. Can be forced to complete immediately with an optional force parameter |
| remove | Removes the progress bar element from the DOM |
| setProgress | Manually sets the progress value (between 0.0 and 1.0) |
| inc | Increments the progress bar by a specified amount. If no amount is specified, it makes a small automatic increment |
| trickle | Adds small random increments to the progress bar |
| isStarted | Checks if the progress bar has been started |
| isRendered | Checks if the progress bar is rendered in the DOM |
| getPositioningCSS | Returns the positioning CSS property of the progress bar |
Example Usage
`js
'use client';import React from 'react';
import { useTopLoader } from 'nextjs-toploader';
const Component = () => {
const loader = useTopLoader();
return (
);
};export default Component;
`---
$3
For rendering add
to your return() inside the component in App() in your App.js:`js
import NextTopLoader from 'nextjs-toploader';
const App = () => {
return (
{/ Your Routes Here /}
);
};export default App;
`$3
If no props are passed to
, below is the default configuration applied.`jsx
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='
'
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 in ms.
- speed: animation speed for the TopLoader in ms
- easing: animation settings using easing (a CSS easing string).
- height: height of TopLoader in px.
- crawl: auto incrementing behavior for the TopLoader.
- showSpinner: to show spinner or not.
- shadow: a smooth shadow for the TopLoader. (set it to false 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).
- showForHashAnchor: to show for "#" url or not. (set it to false to disable it).
- nonce: to add nonces to the