Next.js Progressbar Spinner

Next.js component for a loading effect between pages mixing nprogress with react-spinners

This component was based on Next.js Progressbar

Live demo

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

Why not use both individualy?

As a study to learn how to create package and distribute modules on npm, and also add some extra configs.

How to install?

npm i nextjs-progressbar-spinner

How to use?

Import NextProgressbarSpinner in your pages/_app.js file or a component inside it:

import { NextProgressbarSpinner } from 'nextjs-progressbar-spinner'

And for rendering add <NextProgressbarSpinner /> to your return():

import { NextProgressbarSpinner } from 'nextjs-progressbar-spinner'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <NextProgressbarSpinner />
      <Component {...pageProps} />      
    </>
  )
}

export default MyApp

You can also use it inside other components like the demo is using it inside a header

Default Config

If no props are passed to <<NextProgressbarSpinner />, below is the default configuration applied and the spinner is not rendered.

<<NextProgressbarSpinner 
  NextNProgressProps={
  progressBarVisibility = 'visible',
  color = '#61DCFB',
  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.
progressBarVisibility : in case you dont want to show the progressBar set it to 'hidden'
options = { showSpinner: false } by default the spinner from nprogress is hidden, if you want it set this prop to true. Extra options props are linked bellow
spinnerTop and spinnerRight in case you set the default nprogress spinner to visible you cant set its position with this 2 props

React-Spinners Configs

<NextProgressbarSpinner 
  spinnerType="CircleLoader"
  spinnerProps={{
    size: '2rem',
    color: '#61DCFB',
    cssOverride: {},
    speedMultiplier: 2.5,
    height: 5,
    width: 5,
    radius: 5,
    margin: 5,
  }}
/>

Not all spinners share the same props, check the docs and story book
Documentation of props is provided by the module itself react-spinners
And also a storybook with a full list of spinnerType

Other Configs

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

 <NextProgressbarSpinner
   NextNProgressProps={{
    options: { 
      minimum: number;
      template: string;
      easing: string;
      speed: number;
      trickle: boolean;
      trickleSpeed: number;
      showSpinner: boolean;
      parent: string;: false 
    },
   }} 
/>

📝 Acknowlegements

apal21, rstacruz and davidhu2000 for their modules
alexeagleson for the detailed guide on How to Create and Publish a React Component Library

🔖 Show your support

Give a ⭐️ if you like this project!
Feel free to send any PR if you think antything can be improved