Zero-dependency Progress Bar/Skeleton

Install

npmi @aldabil/next-progress

Usage

In your custom _app.tsx|js.

//...some impotrs...import{Router}from"next/router";importProgressfrom"@aldabil/next-progress";//Progress setupProgress.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());constMyApp=(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.