A next js (app+page) route top progress bar has all the functionality required, including all the features and fixed from earlier packages. Most popular packages are nextjs-toploader and next-nprogress-bar both has some issues. nextjs-toploader do not come with delay time and even they don't want to give this options as it already has a closed PR . On the other hand next-nprogress-bar has a open issue. I just try solve this issues and give the options also.
- Small in Size
-
delay
options - Solve for not showing progress bar on first load
- Properly Maintained
$ npm i next-app-progress-bar
Import AppProgressBar
in your app/layout.tsx/js
and place inside the body
tag.
import { AppProgressBar } from "next-app-progress-bar";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<AppProgressBar />
{children}
</body>
</html>
);
}
For triggering progress bar in your app
folder, please use follow the steps bellow.
//Import `useRouter` from `next-app-progress-bar` instead `next/navigation`.
import { useRouter } from "next-app-progress-bar";
//Then simple use it as like you normally use from `next/navigation`
Import PageProgressBar
into your pages/_app.tsx/js
and place the component on MyApp
.
import { PageProgressBar } from 'next-app-progress-bar';
export default function MyApp({ Component, pageProps }) {
return (
<>
<PageProgressBar />
<Component {...pageProps} />;
</>
);
}
For page router you do not handle useRouter separately
Name | Description | Type | Default |
---|---|---|---|
color | Progress bar color. | string | #2299DD |
initialPosition | The progress bar initial position in percentage. For Example - "8/100=8%=0.08" | number | 0.08 |
crawlSpeed | Incremental delay speed in milliseconds. | number | 200 |
speed | Animation speed for the progress bar | number | 200 |
delay | Progress animation start delay | number | 0 |
easing | Animation cubic-bezier setting for speed | string | ease |
height | Height of the progress bar in pixels | number | 3 |
crawl | Auto increment for progress bar | boolean | true |
showSpinner | Toggle display of top right spinner | boolean | true |
shadow | A shadow for the progress bar | string | false | 0 0 10px #2299DD,0 0 5px #2299DD |
template | You can use your custom attribute for your progress bar | string | |
zIndex | You can re-define the `zIndex` for progress bar | number | 1600 |
showAtBottom | To show progress bar on bottom | boolean | false |
showForHashAnchor | If you want to show progress bar on hash anchor tag | boolean | true |
- Author - Siam Ahnaf
- Website - https://www.siamahnaf.com/
- Twitter - https://twitter.com/siamahnaf198
- Github - https://github.com/siamahnaf