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.
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/Scripts/jquery-1.4.1.min.js"></script>
</head>
So that, your can simply inject below script and a full screen loading panel will poped up. Enjoy & happy coding.
