Zero-dependency Progress Bar/Skeleton

Install

npm i @aldabil/next-progress

Usage

In your custom _app.tsx|js.

//...some impotrs...
import { Router } from "next/router";
import Progress from "@aldabil/next-progress";

//Progress setup
Progress.configure({
  type: "bar",
  background:
    "linear-gradient(90deg, rgba(251,175,0,1) 0%, rgba(251,175,0,1) 81%, rgba(127,137,0,1) 100%)",
  height: 3,
  //svg: "used with type='fullpage' ",
});
Router.events.on("routeChangeStart", () => Progress.start());
Router.events.on("routeChangeComplete", () => Progress.complete());
Router.events.on("routeChangeError", () => Progress.complete());

const MyApp = (props: MyAppProps) => {
  //...
};

And that's it.

Demo

Bar Sandbox

SVG Sandbox

Options

Option	Value
type	bar / fullpage. When use fullpage type, you need to provide svg as a string toload with skeleton effect.
background	string - background CSS property. bar color or fullpage background
height	number. bar height or svg height
svg	string. Like `<svg> .... </svg>` with backticks.