next-progress
Advanced tools
Fully configurable & easy to use
it's so quick 
yarn add next-progress
or
npm install --save next-progress
Important❗️ 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
FAQs
NextJS NProgress implementation
The npm package next-progress receives a total of 10,146 weekly downloads. As such, next-progress popularity was classified as popular.
We found that next-progress demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.
Security News
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.