Fully configurable & easy to use
🚀 Demo
it's so quick
yarn add next-progressor
npm install --save next-progressImportant❗️ It has to be done in your custom App - pages/_app[.js / .jsx / .ts / .tsx]
import NextProgress from "next-progress";Anywhere in your custom App's return statement
<NextProgress />Tip: This example is in typescript, if you use javascript then just remove the types.
import type { AppProps } from "next/app";
import Head from "next/head";
import NextProgress from "next-progress";
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<Head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Lorem Ipsum..." />
<title>Example</title>
</Head>
{
//
// Can be placed anywhere in the return statement
//
}
<NextProgress delay={300} options={{ showSpinner: false }} />
{
//
//
//
}
<Layout>
<Component {...pageProps} />
</Layout>
</>
);
}Height of the progress bar.
default = "2px"
Color of the progress bar.
default = "#29D"
Delay of the animation - when page loads faster than the delay time progress bar won't be displayed.
default = 0
If true, progress bar won't be displayed when user travels the same route they're currently on.
default = false
Options for - NProgress.configure(options).
See NProgress docs
default = undefined
Css Custom NProgress styles - must be provided as a string that will go inside the <style jsx> tag.
Warning: color param won't work as you should set the color yourself inside custom css.
default = undefined