next-app-progress-bar
TypeScript icon, indicating that this package has built-in type declarations

1.5.2 • Public • Published

Next App Progress Bar

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.

Buy Me A Coffee

  • Small in Size
  • delay options
  • Solve for not showing progress bar on first load
  • Properly Maintained

Installation

$ npm i next-app-progress-bar

App Router

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

useRouter hook support

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`

Page Router

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

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

Package Sidebar

Install

npm i next-app-progress-bar

Weekly Downloads

12

Version

1.5.2

License

MIT

Unpacked Size

58.4 kB

Total Files

26

Last publish

Collaborators

  • siamahnaf