NProgress

npm install --save nprogress

import NProgress from "nprogress";
import "nprogress/nprogress.css";

CSS import is required for NProgress to work.

<script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
<link rel="stylesheet" href="https://unpkg.com/nprogress@0.2.0/nprogress.css" />

NProgress.start(); // Show progress bar
NProgress.done(); // Complete and hide

// With fetch
async function fetchData(url) {
  NProgress.start();
  try {
    const res = await fetch(url);
    return await res.json();
  } finally {
    NProgress.done();
  }
}

NProgress.isStarted(); // Returns boolean

NProgress.status; // Current value (0.0-1.0) or null

The .inc() method auto-adjusts increment size:

• 0.0-0.2: increments by 0.1
• 0.2-0.5: increments by 0.04
• 0.5-0.8: increments by 0.02
• 0.8-0.99: increments by 0.005

// Hide spinner
NProgress.configure({ showSpinner: false });

// Higher minimum
NProgress.configure({ minimum: 0.1 });

// Smoother animation
NProgress.configure({
  easing: "ease",
  speed: 500,
});

// Disable auto-increment
NProgress.configure({ trickle: false });

// Custom container
NProgress.configure({ parent: "#container" });

// Multiple options
NProgress.configure({
  minimum: 0.1,
  easing: "ease",
  speed: 500,
  showSpinner: false,
});

$(document).on("ajaxStart", function () {
  NProgress.start();
});

$(document).on("ajaxStop", function () {
  NProgress.done();
});

async function fetchData(url) {
  NProgress.start();
  try {
    const res = await fetch(url);
    return await res.json();
  } finally {
    NProgress.done();
  }
}

// With error handling
async function fetchWithProgress(url) {
  NProgress.start();
  try {
    const res = await fetch(url);
    if (!res.ok) throw new Error("Failed");
    return await res.json();
  } catch (err) {
    console.error(err);
    throw err;
  } finally {
    NProgress.done();
  }
}

import Router from "next/router";
import NProgress from "nprogress";

Router.events.on("routeChangeStart", () => NProgress.start());
Router.events.on("routeChangeComplete", () => NProgress.done());
Router.events.on("routeChangeError", () => NProgress.done());

Place in _app.js or layout component.

$(document).on("turbolinks:click", function () {
  NProgress.start();
});

$(document).on("turbolinks:render", function () {
  NProgress.done();
  NProgress.remove();
});

$(document).on("pjax:start", function () {
  NProgress.start();
});

$(document).on("pjax:end", function () {
  NProgress.done();
});

/* Change color (default: #29d) */
#nprogress .bar {
  background: #ff0000;
}

#nprogress .peg {
  box-shadow:
    0 0 10px #ff0000,
    0 0 5px #ff0000;
}

#nprogress .spinner-icon {
  border-top-color: #ff0000;
  border-left-color: #ff0000;
}

/* Bottom positioning */
#nprogress .bar {
  top: auto;
  bottom: 0;
}

/* Custom height */
#nprogress .bar {
  height: 4px;
}

/* Adjust z-index (default: 1031) */
#nprogress {
  z-index: 9999;
}

.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}

NProgress.configure({
  parent: "#nprogress-container",
});

Container must have position: relative and overflow: hidden.