Page Loading Progress Bar in Next.js
Posted on 27th October 2020
2 min read•
In this post I’ll show how to implement a page loading indicator like in YouTube, GitHub and this site.
To get started, install the
Then create the
_app.js file in
pages if you haven’t done so already.
Next import the
bar-of-progress dependency into
_app.js and declare a new progress bar.
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.
The class name is the
className property we gave when declaring the progress bar.
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