DEV Community

Cover image for Page Loading Progress Bar in Next.js
Akhila Ariyachandra
Akhila Ariyachandra

Posted on • Originally published at akhilaariyachandra.com

Page Loading Progress Bar in Next.js

This was originally posted on my blog on 27th October 2020.

In this post I'll show how to implement a page loading indicator like in YouTube, GitHub and my own site.

Example

The example above is running with the cache disabled and the "Slow 3G" preset.

To get started, install the @badrap/bar-of-progress dependency.



yarn add @badrap/bar-of-progress


Enter fullscreen mode Exit fullscreen mode

Then create the _app.js file in pages if you haven't done so already.



// pages/_app.js

const MyApp = ({ Component, pageProps }) => {
  return <Component {...pageProps} />;
};

export default MyApp;


Enter fullscreen mode Exit fullscreen mode

Next import the bar-of-progress dependency into _app.js and declare a new progress bar.



import ProgressBar from "@badrap/bar-of-progress";

const progress = new ProgressBar({
  size: 2,
  color: "#38a169",
  className: "bar-of-progress",
  delay: 100,
});

// ...


Enter fullscreen mode Exit fullscreen mode

We'll be using the Next.js Router's events to control the progress bar.



// ...
import Router from "next/router";

// ...

Router.events.on("routeChangeStart", progress.start);
Router.events.on("routeChangeComplete", progress.finish);
Router.events.on("routeChangeError", progress.finish);

// ...


Enter fullscreen mode Exit fullscreen mode

Finally your _app.js file should look like this.



import ProgressBar from "@badrap/bar-of-progress";
import Router from "next/router";

const progress = new ProgressBar({
  size: 2,
  color: "#38a169",
  className: "bar-of-progress",
  delay: 100,
});

Router.events.on("routeChangeStart", progress.start);
Router.events.on("routeChangeComplete", progress.finish);
Router.events.on("routeChangeError", progress.finish);

const MyApp = ({ Component, pageProps }) => {
  return <Component {...pageProps} />;
};

export default MyApp;


Enter fullscreen mode Exit fullscreen mode

If all goes well, you should be seeing a progress bar on the top of your site while transitioning between pages.

Sometimes the progress bar might be hidden behind another element, as was the case in my own site.

To solve it all you have to do is increase the z-index of the progress bar in your css.



.bar-of-progress {
  z-index: 50;
}


Enter fullscreen mode Exit fullscreen mode

The class name is the className property we gave when declaring the progress bar.



const progress = new ProgressBar({
  size: 2,
  color: "#38a169",
  className: "bar-of-progress",
  delay: 100,
});


Enter fullscreen mode Exit fullscreen mode

Top comments (6)

Collapse
 
areeburrub profile image
Areeb ur Rub

Thanks bruh, It helped

Collapse
 
onder profile image
ร–nder BakฤฑrtaลŸ

This article the documentation of the mentioned package, not their README.md. Well done.

Collapse
 
newtfrank profile image
Newton

Really helpful thanks

Collapse
 
akhilaariyachandra profile image
Akhila Ariyachandra

Glad you it found it useful!!!! ๐Ÿ˜Š

Collapse
 
alabius profile image
Sunday Alabi

Am looking for a scenario where you are not changing route. but just a page refresh

Collapse
 
akhilaariyachandra profile image
Akhila Ariyachandra

You can probably use something like router.replace(router.asPath); to refresh the page. Check the useRouter hook.