nextjs-progressbar

Nprogress component for Next.js app.

Usage no npm install needed!

<script type="module">
  import nextjsProgressbar from 'https://cdn.skypack.dev/nextjs-progressbar';
</script>

README

Next.js Progressbar

A simple Next.js progressbar component using NProgress.

I've created this Blog to help you create your own progressbar

Demo: https://demo-nextjs-progressbar.vercel.app

How to install?

npm i nextjs-progressbar

How to use?

After installing the package, import this in your pages/_app.js file.

import NextNprogress from 'nextjs-progressbar';

And for rendering add <NextNProgress /> inside Container component.

Default Config

<NextNprogress
  color="#29D"
  startPosition={0.3}
  stopDelayMs={200}
  height={3}
  showOnShallow={true}
/>
  • 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.

Advanced Config

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

<NextNprogress
  options={{ easing: 'ease', speed: 500 }}
/>