NProgress.js--show progress of page loading

NProgress is a jQuery plugin that shows an interactive progress bar on the top of your page, inspired by the one on YouTube. It consists of a global object - NProgress which holds a number of methods that you can call to advance the progress bar.

Github here
Demo here

Click demo code below:
html

 <div>  
   <h1>Quick Load</h1>  
   <p>Show the progress bar quickly. This is useful for one-off tasks like AJAX requests and page loads.</p>  
   <button class="quick-load">Quick Load</button>  
 </div>  
 <div>  
   <h1>Incremental Load</h1>  
   <p>The progress bar is incremented with every element that is loaded. This can be useful in web apps that load multiple items.</p>  
   <button class="show-progress-bar">Show Progress Bar</button>  
   <button class="load-one-item">Load An Item</button>  
   <button class="finish">Finish Loading</button>  
 </div>  
 <div>  
   <h1>Percentage Load</h1>  
   <p>NProgress lets you set the progress bar to a specific percentage. This can be useful in apps where you know the total number of the items to be loaded, so you can calculate the percentage. This is the technique that we will use in the demo.</p>  
   <button class="show-progress-bar">Show Progress Bar</button>  
   <button class="set-to-25">Set to 25% Loaded</button>  
   <button class="set-to-75">Set to 75% Loaded</button>  
   <button class="finish">Finish Loading</button>  
 </div>  

JS part:

 $(function(){  
   // Quick Load  
   $('button.quick-load').click(function(){  
     NProgress.done(true);  
   });  
   // Incremental Load  
   $('button.show-progress-bar').click(function(){  
     NProgress.start();  
   });  
   $('button.load-one-item').click(function(){  
     NProgress.inc();  
   });  
   $('button.finish').click(function(){  
     NProgress.done();  
   });  
   // Percentage Load  
   $('button.set-to-25').click(function(){  
     NProgress.set(0.25);  
   });  
   $('button.set-to-75').click(function(){  
     NProgress.set(0.75);  
   });  
 });  

My demo code below:

change the color of bar and spinner:

#nprogress .bar {
  background: blue;
}

#nprogress .spinner-icon {
  border-top-color: red;
  border-left-color: red;
}

how to use NProgress.js as a generic page load for all pages on a site

<script>

    // Show the progress bar 
    NProgress.start();

    // Increase randomly
    var interval = setInterval(function() { NProgress.inc(); }, 1000);        

    // Trigger finish when page fully loaded
    jQuery(window).load(function () {
        clearInterval(interval);
        NProgress.done();
    });

    // Trigger bar when exiting the page
    jQuery(window).unload(function () {
        NProgress.start();
    });

</script>