Full Screen Loading Panel

ASP.NET Community

0/5 (0 vote)

Oct 11, 2013

CPOL

6720

After few projects, finally come out with this simple loading panel scripts. Hope it useful for your.JavaScripts function ShowLoading() {

After few projects, finally come out with this simple loading panel scripts. Hope it useful for your.

JavaScripts

function ShowLoading() {

 
    function GetWidth() {
        var x = 0;
        if (self.innerWidth) {
            x = self.innerWidth;
        }
        else if (document.documentElement && document.documentElement.clientWidth) {
            x = document.documentElement.clientWidth;
        }
        else if (document.body) {
            x = document.body.clientWidth;
        }
        return x;
    };
 
    function GetHeight() {
        var y = 0;
        if (self.innerHeight) {
            y = self.innerHeight;
        }
        else if (document.documentElement && document.documentElement.clientHeight) {
            y = document.documentElement.clientHeight;
        }
        else if (document.body) {
            y = document.body.clientHeight;
        }
        return y;
    };
 
    $("body").append("<div class='LsnLoadingPanelFade'></div><img style='top:" + (GetHeight() / 2).toString() + "px; left:" + (GetWidth() / 2).toString() + "px' class='LsnLoadingPanel'/>");
};
 
function HideLoading() {
    $(".LsnLoadingPanelFade").remove();
    $(".LsnLoadingPanel").remove();
};

Css Class

.LsnLoadingPanelFade 
{
 	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index:99999;
}
 
.LsnLoadingPanel 
{
	position: fixed;
	z-index:100000;
	background-image:url('../Images/Loading.gif');
	width:106px;
	height:54px;

}

These sample scripts must work together with jQuery. E.g.

So that, your can simply inject below script and a full screen loading panel will poped up. Enjoy & happy coding.

ShowLoading();