how to create or make a loading screen in html javascript

Here is the simple way to create or make a loading screen in html and javascript

Write two functions like below:

// This is to show the loading page / progress bar

function showProgress() {

    var scrollPos = (window.pageYOffset > $('html').scrollTop())?(window.pageYOffset):($('html').scrollTop()),

    imgYPos = scrollPos + (($(window).height() / 2 ) -30 ) ,

    overlayObj = $('

').height($(document).height())

                     .css('background-position', 'center '+imgYPos+'px');            

    $('body').append(overlayObj);

}

// This is to hide the loading page / progress bar

function hideProgress() {

    $('.pageLoadingOverlay').remove();

}

And the CSS for this code snippet is

.pageLoadingOverlay {

    height: 100%;

    width: 100%;

    display: block;

    z-index: 100;

    position: absolute;

    left: 0;

    top: 0;

    background: rgba(0, 0, 0, 0.5) url("../images/325.gif") no-repeat center center; 

}

Now you can call showProgress() when processing the screen and hide progress while closing the screen