next-progress
Advanced tools
Readme
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 4,398 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
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.
Security News
This episode of the Risky Biz podcast discusses how the rise of small open source packages and the shift towards individual maintainers makes the ecosystem more vulnerable to supply chain attacks.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.