next-progress

$3

_Fully configurable & easy to use_

🚀 Demo

🔌 Setup

_it's so quick_

$3

``bash
yarn add next-progress
`

_or_

`bash
npm install --save next-progress
`

$3

_Important❗️_ It has to be done in your custom App - pages/\_app\[.js / .jsx / .ts / .tsx\]

`ts
import NextProgress from "next-progress";
`

$3

Anywhere in your custom App's return statement

`tsx

`

🌟 Example pages\\\_app

_Tip:_ This example is in typescript, if you use javascript then just remove the types.

`tsx
import type { AppProps } from "next/app";
import Head from "next/head";
import NextProgress from "next-progress";

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







{
//
// Can be placed anywhere in the return statement
//
}

{
//
//
//
}




);
}
`

⚙️ Docs - Options

$3

Height of the progress bar.

_default = "2px"_

$3

Color of the progress bar.

_default = "#29D"_

$3

Delay of the animation - when page loads faster than the delay time progress bar won't be displayed.

_default = 0_

$3

If true, progress bar won't be displayed when user travels the same route they're currently on.

_default = false_

$3

Options for - NProgress.configure(options).

See NProgress docs

_default = undefined_

$3

Css Custom NProgress styles - must be provided as a string that will go inside the