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

| 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. |