Create page transitions with NProgress
If you want to convince your users that something is actually happening when they are navigating through pages on your website then you came to the right place.
When a user is making some actions on your website you should always give them some kind of visual feedback during that action.
- If they are submitting a form they should be able to see a loader while data is being sent
- If they are buying something from an online shop loader must be present while the order is being processed
These are just some basic examples. Users should always have some kind of feedback, as it represents good UX (User Experience) on your website.
The thing that is often overlooked or forgotten is the page transitions. This means that users should see some kind of progress bar, loader, spinner while he/she is being redirected to a different page. This way you'll give them visual feedback that the page is being loaded, and how much time is left until they can access the certain page.
This is where
nprogress.js comes into play.
nprogress.js is a small library that shows the progress bar while the page is being loaded.
In this blog post, I'll talk about implementation with `NextJS, but their documentation covers more examples.
Install nprogress using
After the library is installed open up the
_app.js file in your
Import Router from
After that copy and paste this code outside (before) creating the
This code is simple and pretty easy to read but let's go through it together
- First, we configure NProgress (this step is optional) by passing it animation type and speed.
- We then listen for the
routeChangeStartevent emitted by
Router. When we get that event we call
NProgress.start()which starts the animation
- After the page is successfully loaded (or error happened) event
routeChangeErrorfor error) is emitted. When that happens we stop the progress by calling
After you did all the steps, all that's left to do is to add the required
css for the progress bar. Create a
page-loader.css file with the following content:
CSS is taken from here.
You can use
page-loader.css to do whatever you want with the progress bar, style it however you like, and see fit. Import
page-loader.css into your
pages/_app.js and you are good to go.
You can see the demo for the progress bar on this website. If you click on a post you'll see a red progress bar on top of the screen.
And that's pretty much it. Check the documentation for the nprogress by clicking here.