How Youtube stacking bar on top of their feature pages, it demonstrates page is stacking and which really looks really cool. Today I will demonstrat to you how you can rapidly include Youtube like advancement bar our site.
Go to Github and download nprogress Javascript plugin or simply indicate nprogress CDN here, it is especially made for Ajax web application yet you can different things with it as well.
Everything we need is nprogress.js and nprogress.css from the repo.
Step 1:
Add nprogress.js and nprogress.css
Go to Github and download nprogress Javascript plugin or simply indicate nprogress CDN here, it is especially made for Ajax web application yet you can different things with it as well.
Everything we need is nprogress.js and nprogress.css from the repo.
Step 1:
Add nprogress.js and nprogress.css
<script src='https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js'></script>
<link rel='stylesheet' href='ttps://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css'/>
Step 2
Nprogress offers two methods NProgress.start() and NProgress.done(), we will incorporate them with DOM document.readyState property, it tells us the loading status of the current document. That’s it! Just put the following code at the bottom of your page but before tag and you should see it in action.
//Page is loading start progress
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
NProgress.start(); //start progress bar
}
}
//when page is loaded stop progress
var everythingLoaded = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
clearInterval(everythingLoaded);
setTimeout(function(){NProgress.done()},2000);
}
}, 10);
jQuery version
$(document).ready(function() {
NProgress.start();
});
$(window).load(function() {
//setTimout() for 2 seconds progress stop delay
setTimeout(function(){NProgress.done()},2000);
});
Usage
Method for using is so simple when page load just use NProgress.start() and when page loading id complete just done it with NProgress.done()
