Slim Top Progress Bar Using NProgress.js

Slim Top Progress Bar
22 Flares 22 Flares ×

Slim Top Progress Bar Using NProgress.js

You must have seen a slim top progress bar on YouTube and Medium whenever the site try to load some content for you. It actually gives idea to user that something, some process is happening in background. So today in this article will learn how to create an Slim Top Progress Bar using NProgress.js

A nanoscopic progress bar. Featuring realistic trickle animations to convince your users that something is happening!

Installation

First we will add the required CSS and jQuery files to our HTML document

      <link href='css/nprogress.css' rel='stylesheet' />
      <script src='js/jquery-1.10.js'></script>
      <script src='js/nprogress.js'></script>

CSS

nprogress.css file contains the styling for the top progress bar, which is

#nprogress {
	pointer-events: none;
	-webkit-pointer-events: none;
}
#nprogress .bar {
	background: #0D9201;
	position: fixed;
	z-index: 100;
	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 15px #0D9201, 0 0 10px #0D9201;
	opacity: 1.0;
	-webkit-transform: rotate(3deg) translate(0px, -4px);
	-moz-transform: rotate(3deg) translate(0px, -4px);
	-ms-transform: rotate(3deg) translate(0px, -4px);
	-o-transform: rotate(3deg) translate(0px, -4px);
	transform: rotate(3deg) translate(0px, -4px);
}

Basic Usage (for demo)

$('body').show();
    $('.version').text(NProgress.version);
    NProgress.start();
    setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000);

Please note that, for demo purpose we have added the delay of one second in the script (1000). Please remove it when you are using it in your project.

For using it into your project you just need to add the

NProgress.start();
NProgress.done();

If you are using something like Turbolinks or similar then don’t forget to use Turbolinks 1.3.0+, and use the following

$(document).on('page:fetch',   function() { NProgress.start(); });
$(document).on('page:change',  function() { NProgress.done(); });
$(document).on('page:restore', function() { NProgress.remove(); });

Credits

NProgress.js has been developed by a very talented designer and developer Rico Sta Cruz.

Useful Read: New UI Pattern: Website Loading Bars (usabilitypost.com)

We hope you find this tutorial useful. Ans don’t forget to mention your opinion, queries, feedback in comment section below.

22 Flares Twitter 12 Facebook 7 Google+ 2 LinkedIn 0 Pin It Share 1 22 Flares ×
author avatar

Akash is a blogger, amateur photographer, speaker and a UI designer from Pune, India. He loves designing UI for websites and web applications for his clients. You can get in touch with him akash@dzyngiri.com | Twitter | Facebook

Connect with us

12 Comments

  1. What if I’m using twitter bootstrap and I already have a navigation bar at the top? I want to use this progress bar, but it seems like my navbar is blocking it at the top. I dont’ want to permanently bring the navbar down 2 pixels, but I do want the progress bar to show. Any ideas?

  2. For e-learning courses, can this be easily changed to be a progress bar showing where the user is at within the entire lesson?

    Can you assist in accomplishing this?

    Thanks!
    Susanne

Leave a Reply

(*) Required, Your email will not be published