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