@aldabil/next-progress v0.0.4

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.

Bar Sandbox

SVG Sandbox

Options