Home

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.

cover image

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

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.

Implementation

Install nprogress using

npm install nprogress yarn add nprogress

After the library is installed open up the _app.js file in your NextJS project. Import Router from next/router, and nprogress using

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

After that copy and paste this code outside (before) creating the App function

NProgress.configure({ easing: 'ease', speed: 500 }); Router.events.on('routeChangeStart', () => NProgress.start()); Router.events.on('routeChangeComplete', () => NProgress.done()); Router.events.on('routeChangeError', () => NProgress.done());

This code is simple and pretty easy to read but let's go through it together

  1. First, we configure NProgress (this step is optional) by passing it animation type and speed.
  2. We then listen for the routeChangeStart event emitted by Router. When we get that event we call NProgress.start() which starts the animation
  3. After the page is successfully loaded (or error happened) event routeChangeComplete (or routeChangeError for error) is emitted. When that happens we stop the progress by calling NProgress.done()

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:

/* Make clicks pass-through */ #nprogress { pointer-events: none; } #nprogress .bar { background: #29d; position: fixed; z-index: 1031; top: 0; left: 0; width: 100%; height: 2px; } /* Fancy blur effect */ #nprogress .peg { display: block; position: absolute; right: 0px; width: 100px; height: 100%; box-shadow: 0 0 10px #29d, 0 0 5px #29d; opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -ms-transform: rotate(3deg) translate(0px, -4px); transform: rotate(3deg) translate(0px, -4px); } /* Remove these to get rid of the spinner */ #nprogress .spinner { display: block; position: fixed; z-index: 1031; top: 15px; right: 15px; } #nprogress .spinner-icon { width: 18px; height: 18px; box-sizing: border-box; border: solid 2px transparent; border-top-color: #29d; border-left-color: #29d; border-radius: 50%; -webkit-animation: nprogress-spinner 400ms linear infinite; animation: nprogress-spinner 400ms linear infinite; } .nprogress-custom-parent { overflow: hidden; position: relative; } .nprogress-custom-parent #nprogress .spinner, .nprogress-custom-parent #nprogress .bar { position: absolute; } @-webkit-keyframes nprogress-spinner { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes nprogress-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

This 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.