Probably the easiest progress bar/skeleton for Next.js
npm install @aldabil/next-progressjsx
npm i @aldabil/next-progress
`
Usage
In your custom _app.tsx|js.
`jsx
//...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 ` with backticks. |