nextjs-router-progress-bar

Simple zero-config progress bar for Next.js apps.

Usage no npm install needed!

<script type="module">
  import nextjsRouterProgressBar from 'https://cdn.skypack.dev/nextjs-router-progress-bar';
</script>

README

Next.js Router Progress Bar

A simple zero-config progress bar for Next.js apps.

  • Zero dependencies
  • Less than 0.5KB gzipped
  • TypeScript support
  • No configuration required

Demo: https://nextjs-router-progress-bar.vercel.app

How to install?

npm i nextjs-router-progress-bar

How to use?

Just initialize the library in your pages/_app.js file.

import { initialize } from "nextjs-router-progress-bar";

initialize();

Options

You may pass configuration to the initialize function:

const progress = initialize({
  /**
   * The size (height) of the progress bar.
   * Numeric values get converted to px. */
  size?: number | string;
  /**
   * Color of the progress bar. Also used for the glow
   * around the bar. */
  color?: string;
  /**
   * Class name used for the progress bar element. */
  className?: string;
  /**
   * How many milliseconds to wait before the progress bar
   * animation starts after calling .start(). */
  delay?: number;
});

The progress instance returned has the following methods:

progress.start(); // starts the animation
progress.finish(); // ends the animation