This package has been renamed to @siamf/next-progress
Please use @siamf/next-progress instead.
This package is no longer maintained. For the latest updates and improvements, migrate to:
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 next-app-progress-barImport 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 |
