Next.js progress bar with debounce

> Note
> This is a fork of nextjs-progressbar by apal21. It adds an optional debounce to the progress bar to prevent it from flickering when the page loads quickly.

A simple Next.js progressbar component using NProgress.

Usage

After installing the package, import NextProgress in your pages/_app.tsx file and add to the render function in App:

``js
import NextProgress from '@approximant/next-progress';

export default function App({ Component, pageProps }) {
return (
<>

;

);
}
`

$3

If no props are passed to , the default configuration is applied.

`jsx
// Default config
debounce={300}
color="#29D"
startPosition={0.3}
stopDelayMs={200}
height={3}
showOnShallow={true}
/>
`

- debounce: Debounce time in ms. The progress bar will not be shown if the page loads in less than this time.
- color: to change the default color of progressbar. You can also use rgb(,,) or rgba(,,,).
- startPosition: to set the default starting position : 0.3 = 30%.
- stopDelayMs: time for delay to stop progressbar in ms.
- height: height of progressbar in px.
- showOnShallow: You can choose whether you want the progressbar to be displayed if you're using shallow routing. It takes a boolean. Learn more about shallow routing in Next.js docs.

$3

#### Adding nonce

We use internal css in this package. If you are using csp, you can add nonce to the ;
}}
/>
`

#### Other config

You can use other configurations which NProgress provides by adding a JSON in options props.

`jsx

``