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
