Akhila Ariyachandra

Page Loading Progress Bar in Next.js

Posted on 27th October 2020

2 min read

0 views

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

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

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

shell

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

pages/_app.js

jsx

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

pages/_app.js

jsx

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

pages/_app.js

jsx

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

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

css

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

jsx

If you enjoyed this post please leave a like or two below!!!

Check out my latest post...

Making delayed network requests in React after state changes

13th September 2021