# Next Js TopLoader
- A Next.js Top Loading Bar component made using nprogress, works with Next.js 14 and React.
[](https://www.npmjs.com/package/nextjs-toploader)
[](https://www.npmjs.com/package/nextjs-toploader)
## Install
using npm:
```bash
npm install nextjs-toploader
```
using yarn:
```bash
yarn add nextjs-toploader
```
## Usage
import using:
```js
import NextTopLoader from 'nextjs-toploader';
```
### Usage with `app/layout.js` for `app` folder structure
For rendering add `` to your `return()` inside the `` of `RootLayout()`:
```js
import NextTopLoader from 'nextjs-toploader';
export default function RootLayout({ children }) {
return (
{children}
);
}
```
### Usage with `pages/_app.js` for `pages` folder structure
For rendering add `` to your `return()` in `MyApp()`:
```js
import NextTopLoader from 'nextjs-toploader';
export default function MyApp({ Component, pageProps }) {
return (
<>
;
);
}
```
### Usage with React, Vite React or any other React Based Framework
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;
```
### Default Configuration
If no props are passed to ``, below is the default configuration applied.
```jsx
```
- `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)
- `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
[](https://github.com/sponsors/TheSGJ)
[](https://www.buymeacoffee.com/thesgj)