Next Js TopLoader

- A Next.js Top Loading Bar component made using nprogress, works with Next.js 13.

Install

using npm:

``bash
npm install nextjs-toploader
`

using yarn:

`bash
yarn add nextjs-toploader
`

Usage

import using:

`js
import NextTopLoader from 'nextjs-toploader';
`

$3

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():

`js
import NextTopLoader from 'nextjs-toploader';

export default function MyApp({ Component, pageProps }) {
return (
<>

;

);
}
`

$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"
/>
`

- 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 to false` to disable it)