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
delayoptions- Solve for not showing progress bar on first load
- Properly Maintained
$ npm i @siamf/next-progressImport AppProgressBar in your app/layout.tsx/js and place inside the body tag.
import { AppProgressBar } from "@siamf/next-progress";
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 `@siamf/next-progress` instead `next/navigation`.
import { useRouter } from "@siamf/next-progress";
//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 '@siamf/next-progress';
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