Step 1 : (Loader.aspx)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Loader.aspx.cs" Inherits="Demo.Loader" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Loader</title>
<style type="text/css">
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
filter: alpha(opacity=50);
}
.loading {
font-family: Arial;
font-size: 10pt;
border: 5px solid #A4A4A4;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
}
</style>
<script type="text/javascript">
function InActiveBackground1()
{
var body
= document.getElementsByTagName("BODY")[0];
//----------------------------------------------------
var divM
= document.createElement("DIV");
divM.className
= "overlay";
// OR
//divM.setAttribute("class",
"overlay");
// OR
//_divM.setAttribute("style",
"position: fixed;top: 0;left: 0;background-color: black;z-index:
99;opacity: 0.1;filter: alpha(opacity=80);-moz-opacity: 0.8;min-height:
100%;width: 100%;");
//----------------------------------------------------
var divC
= document.getElementById("dvLoading");
divC.style.display
= 'block';
var w
= document.documentElement.clientWidth;
var h
= document.documentElement.clientHeight;
var divW
= divC.clientWidth;
var divH
= divC.clientHeight;
divC.style.position
= "absolute";
divC.style.top
= (h / 2) - (divH / 2) + "px";
divC.style.left
= (w / 2) - (divW / 2) + "px";
//----------------------------------------------------
body.appendChild(divM);
//----------------------------------------------------
body.appendChild(divC);
}
function InActiveBackground2()
{
var body
= document.getElementsByTagName("BODY")[0];
//----------------------------------------------------
var divM
= document.createElement("DIV");
divM.className
= 'overlay';
// OR
//divM.setAttribute("class",
"overlay");
// OR
//_divM.setAttribute("style",
"position: fixed;top: 0;left: 0;background-color: black;z-index:
99;opacity: 0.1;filter: alpha(opacity=80);-moz-opacity: 0.8;min-height:
100%;width: 100%;");
//----------------------------------------------------
var divC
= document.createElement("DIV");
divC.innerHTML
= 'Loading. Please wait...<BR/><BR/>';
divC.className
= 'loading';
// OR
//divC.setAttribute("class",
"loading");
// OR
//divC.setAttribute("style",
"font-family: Arial;font-size: 10pt;border: 5px solid #67CFF5;width:
200px;height: 100px;display: none;position: fixed;background-color:
White;z-index: 999;");
divC.style.textAlign
= 'center';
divC.style.display
= 'block';
var w
= document.documentElement.clientWidth;
var h
= document.documentElement.clientHeight;
var divW
= "200";
var divH
= "100";
divC.style.position
= "absolute";
divC.style.top
= (h / 2) - (divH / 2) + "px";
divC.style.left
= (w / 2) - (divW / 2) + "px";
//----------------------------------------------------
var img
= document.createElement("IMG");
img.setAttribute("src", "Images/loader.gif");
//img.setAttribute("width",
"228");
//img.setAttribute("height",
"304");
img.setAttribute("alt", "");
//----------------------------------------------------
divC.appendChild(img);
//----------------------------------------------------
body.appendChild(divM);
//----------------------------------------------------
body.appendChild(divC);
}
window.onbeforeunload
= InActiveBackground2;
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
</div>
<div id="dvLoading" class="loading" align="center">
Loading.
Please wait...<br />
<br />
<img src="Images/loader.gif" alt="" />
</div>
</form>
</body>
</html>
Step 2:- (Loader.aspx.cs)
using System;
using System.Threading;
using System.Web.UI;
namespace Demo
{
public partial class Loader : Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
Thread.Sleep(5000);
}
}
}
Note: -
I have created two JavaScript function.
In InActiveBackground1 () function first I am
creating the div that Inactive background the entire page and showing the
existing loading div that is available on design page for show loading Image on
it.
<div id="dvLoading" class="loading" align="center">
Loading.
Please wait...<br />
<br />
<img src="Images/loader.gif" alt="" />
</div>
In InActiveBackground2 () function I created dynamically
tag to fulfill the same functionality of InActiveBackground1 () function
to show Loading Image.
So, we don’t need to below div if we are using the InActiveBackground2
() function.
<div id="dvLoading" class="loading" align="center">
Loading.
Please wait...<br />
<br />
<img src="Images/loader.gif" alt="" />
</div>
On Button click
I am using the Thread.Sleep() to suspend the
current thread for a specified time.
protected void Button1_Click(object sender, EventArgs e)
{
Thread.Sleep(5000);
}
You can use it in Master page also to effect from
all pages.
Example:
Download loader.gif
Right Click and Save
No comments:
Post a Comment