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.

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

subinsblogla = 0;
setInterval(function() {
    if (document.readyState != 'complete') {
        document.documentElement.style.overflow = "hidden";
        var subinsblog = document.createElement("div");
        subinsblog.id = "subinsblogldiv";
        var polu = 999999999;
        subinsblog.style.zIndex = polu;
        subinsblog.style.background = "black url(<strong>https://lh4.googleusercontent.com/-4WVJgCO93zc/UgpU2Y60CjI/AAAAAAAAC8E/R3XujnTjz3Y/s474/initializing.png</strong>) 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);

You may replace the variable names, but make sure that the variable name is unique.

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.