@siamf/next-progress

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

Installation

$ npm i @siamf/next-progress

App Router

Import 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>
    );
}

`useRouter` hook support

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`

Page Router

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

Configurations

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

Stay in touch

Author - Siam Ahnaf
Website - https://www.siamahnaf.com/
Twitter - https://twitter.com/siamahnaf198
Github - https://github.com/siamahnaf

Package detail