NProgress.js to show progress of page loading

Question

I am trying to figure out how to use NProgress.js as a generic page load for all pages on a site. I am unable to find any documentation or an easy way to add this loading effect on page load and have it finish when the entire page has loaded.

http://ricostacruz.com/nprogress/

Any help is greatly appreciated!

Answer 1

Simply put, place this JavaScript anywhere in your html, it's a good practice to place it before the closing body tag:

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

Oh and don't be confused, NProgress is in the global scope, it has nothing to do with jQuery, I'm using jQuery's .load()/.unload() for convenience only, and please don't put the NProgress.start() inside a jquery document's .ready(), it's useless clutter.

Answer 2

In the main page: http://ricostacruz.com/nprogress/

I found this (with show page source code):

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

$("#b-0").click(function() { NProgress.start(); });
$("#b-40").click(function() { NProgress.set(0.4); });
$("#b-inc").click(function() { NProgress.inc(); });
$("#b-100").click(function() { NProgress.done(); });
</script>

As you can see, you need to use NProgress.start(); to starts de progress bar. Try something like this (i used jquery ready function):

<script>
NProgress.start();
NProgress.set(0.4);
//Increment 
var interval = setInterval(function() { NProgress.inc(); }, 1000);
$(document).ready(function(){
    NProgress.done();
    clearInterval(interval);
});
</script>