Loading Bar until page loads completely using Javascript

This tutorial was requested by Sumit. In this tutorial I'm going to tell how to put up a loading screen until the page has loaded completely.
DEMO
Here is the screenshot of loading screen :
The loading bar will fade out when loading is completed.
This code will work for all sites including Blogger Blogs, WordPress Blogs except Dynamic Views Template of Blogger (because it uses ajax loading).
You can change the image if you want. I have created an image of my own :
Ok. Now let's get down to the code. This code is pure Javascript, no jQuery because the site might be loading jQuery and we should have to show the loading bar before the loading of jQuery.
Here is the code. You have to place it just after <head>

<script>
subinsblogla=0;
setInterval(function(){
if(document.readyState!='complete'){
 document.documentElement.style.overflow="hidden";
 var subinsblog=document.createElement("div");
 subinsblog.id="subinsblogldiv";
 var polu=99*99*99999999*999999999;
 subinsblog.style.zIndex=polu;
 subinsblog.style.background="black url(https://lh4.googleusercontent.com/-4WVJgCO93zc/UgpU2Y60CjI/AAAAAAAAC8E/R3XujnTjz3Y/s474/initializing.png) 50% 50% no-repeat";
 subinsblog.style.backgroundPositionX="50%";
 subinsblog.style.backgroundPositionY="50%";
 subinsblog.style.position="absolute";
 subinsblog.style.right="0px";
 subinsblog.style.left="0px";
 subinsblog.style.top="0px";
 subinsblog.style.bottom="0px";
 if(subinsblogla==0){
  document.documentElement.appendChild(subinsblog);
  subinsblogla=1;
 }
}else if(document.getElementById('subinsblogldiv')!=null){
 document.getElementById('subinsblogldiv').style.display="none";
 document.documentElement.style.overflow="auto";
}
},1000);
</script>
I would recomment you to not replace the variable names, because there might be an other variable like that and the code won't work.
If you want to change the Loading Image just change the

https://lh4.googleusercontent.com/-4WVJgCO93zc/UgpU2Y60CjI/AAAAAAAAC8E/R3XujnTjz3Y/s474/initializing.png 
url in the variable subinsblog.style.background.
Well that's it for now. If you have any problems/suggestions/feedback, just say it out in the comment form below and Happy Independence Day to all Indians and Pakistanis.

Comments

Popular posts from this blog

HOW TO REGISTER FOR SAFETOKEN

How To Get Help In MMM Nigeria - Mavrodi Mondial Moneybox