After few projects, finally come out with this simple loading panel scripts. Hope it useful for your.
JavaScripts
function ShowLoading() {
<span style="COLOR:blue;">function</span> GetWidth() {
<span style="COLOR:blue;">var</span> x = 0;
<span style="COLOR:blue;">if</span> (self.innerWidth) {
x = self.innerWidth;
}
<span style="COLOR:blue;">else</span> <span style="COLOR:blue;">if</span> (document.documentElement && document.documentElement.clientWidth) {
x = document.documentElement.clientWidth;
}
<span style="COLOR:blue;">else</span> <span style="COLOR:blue;">if</span> (document.body) {
x = document.body.clientWidth;
}
<span style="COLOR:blue;">return</span> x;
};
<span style="COLOR:blue;">function</span> GetHeight() {
<span style="COLOR:blue;">var</span> y = 0;
<span style="COLOR:blue;">if</span> (self.innerHeight) {
y = self.innerHeight;
}
<span style="COLOR:blue;">else</span> <span style="COLOR:blue;">if</span> (document.documentElement && document.documentElement.clientHeight) {
y = document.documentElement.clientHeight;
}
<span style="COLOR:blue;">else</span> <span style="COLOR:blue;">if</span> (document.body) {
y = document.body.clientHeight;
}
<span style="COLOR:blue;">return</span> y;
};
$(<span style="COLOR:maroon;">"body"</span>).append(<span style="COLOR:maroon;">"<div class='LsnLoadingPanelFade'></div><img style='top:"</span> + (GetHeight() / 2).toString() + <span style="COLOR:maroon;">"px; left:"</span> + (GetWidth() / 2).toString() + <span style="COLOR:maroon;">"px' class='LsnLoadingPanel'/>"</span>);
};
<span style="COLOR:blue;">function</span> HideLoading() {
$(<span style="COLOR:maroon;">".LsnLoadingPanelFade"</span>).remove();
$(<span style="COLOR:maroon;">".LsnLoadingPanel"</span>).remove();
};
Css Class
<span style="COLOR:maroon;">.LsnLoadingPanelFade</span>
{
<span style="COLOR:red;">position</span>: <span style="COLOR:blue;">fixed</span>;
<span style="COLOR:red;">width</span>: <span style="COLOR:blue;">100%</span>;
<span style="COLOR:red;">height</span>: <span style="COLOR:blue;">100%</span>;
<span style="COLOR:red;">top</span>: <span style="COLOR:blue;">0</span>;
<span style="COLOR:red;">left</span>: <span style="COLOR:blue;">0</span>;
<span style="COLOR:red;">z-index</span>:<span style="COLOR:blue;">99999</span>;
}
<span style="COLOR:maroon;">.LsnLoadingPanel</span>
{
<span style="COLOR:red;">position</span>: <span style="COLOR:blue;">fixed</span>;
<span style="COLOR:red;">z-index</span>:<span style="COLOR:blue;">100000</span>;
<span style="COLOR:red;">background-image</span>:<span style="COLOR:blue;">url('../Images/Loading.gif')</span>;
<span style="COLOR:red;">width</span>:<span style="COLOR:blue;">106px</span>;
<span style="COLOR:red;">height</span>:<span style="COLOR:blue;">54px</span>; }
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.
The ASP.NET Wiki was started by Scott Hanselman in February of 2008. The idea is that folks spend a lot of time trolling the blogs, googlinglive-searching for answers to common "How To" questions. There's piles of fantastic community-created and MSFT-created content out there, but if it's not found by a search engine and the right combination of keywords, it's often lost.
The ASP.NET Wiki articles moved to CodeProject in October 2013 and will live on, loved, protected and updated by the community.
Submit an article or tip
