Slim Top Progress Bar Using NProgress.js

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

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.

Tags design, javascript, jQuery, plugin, tutorials