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>
If you want to change the Loading Image just change the
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.
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 :
Here is the code. You have to place it just after <head>
<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.
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzhZR06Dqmyt8f5SyVN6HOFR5FGB0qiVAifSQSqHRZiQX83PyxFX706E5QJ1q7UCACTLBesqFoQYDTtrXiWuDif6gBbGiOFR-NW0CElotE5oa27s_Ymg1FiCjIOLFVuW0Kzv5OhL4H5wY/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>
If you want to change the Loading Image just change the
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzhZR06Dqmyt8f5SyVN6HOFR5FGB0qiVAifSQSqHRZiQX83PyxFX706E5QJ1q7UCACTLBesqFoQYDTtrXiWuDif6gBbGiOFR-NW0CElotE5oa27s_Ymg1FiCjIOLFVuW0Kzv5OhL4H5wY/s474/initializing.pngurl 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.
0 Comments
Good day precious one, We love you more than anything.