Next.js Progressbar 2

This is fork of nextjs-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?

bash

npm i nextjs-progressbar2





How to use?



After installing the package, import

NextNProgress in your pages/_app.js

 file:

js

import NextNProgress from "nextjs-progressbar";





And for rendering add

to your return() in MyApp()

js

import NextNProgress from "nextjs-progressbar";



export default function MyApp({ Component, pageProps }) {

  return (

    <>

      

      ;

    

  );

}





$3



If no props are passed to

, below is the default configuration applied.

jsx

  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.



$3



#### Adding nonce



We use internal css in this package. If you are using csp, you can add nonce to the