CSS style as ASP. NET Ajax progress indicator (by Dave ward)

I noticed that a lot of people found my mouse pointer As Ajax progress indicator
Example by using search terms suggesting they were looking for a more
Graphical indicator. So, here's an example of doing something more... Web
2.0.

Like last time, I'll base it on a standard updatepanel demo using
Button Control to set a time/date label, with an artificial delay:

< ASP: scriptmanager ID = "Scriptmanager1" Runat = "Server"   />
< Div ID = "Container" Class = "Normal" >
< ASP: updatepanel ID = "Updatepanel1" Runat = "Server" >
< Contenttemplate >
< ASP: Label ID = "Label1" Runat = "Server" Text = "Update me"   />
< ASP: button ID = "Button1" Runat = "Server"  
Onclick = "Button#click" Text = "Button"   />
</ Contenttemplate >
</ ASP: updatepanel >
</ Div >

code highlighting produced by actipro codehighlighter (freeware)
http://www.CodeHighlighter.com/

--> protected void button#click ( Object sender, eventargs E)
{< br> thread. sleep ( 5000 );
label1.text = datetime. now. tostring ();
}

I'll style the container Div with CSS to add a simple border and set up a class for the Progress state: . Normal
{} {
Border : Dashed 1px #000000 ;
Background-color : # Ffffff ;
Cursor : Auto ;
Padding : 10px ;
Width : 200px ;
Text-align : Center ;
}
 
. Progress
{} {
Border : Dashed 1px #000000 ;
Background-color : # Eeeeee ;
Background-Image : Url(spinner.gif) ;
Background-Position : Center ;
Background-repeat : No-repeat ;
Cursor : Wait ;
Padding : 10px ;
Width : 200px ;
Text-align : Center ;
}

Finally, hook up our event handlers for beginrequest and endrequest: < Script Language = "JavaScript" >
// Get a reference to the pagerequestmanager.
VaR PRM = SYS. webforms. pagerequestmanager. getinstance ();
 
// Using that PRM reference, hook _ initializerequest
// And _ endrequest, to run our code at the begin and end
// Of any async postbacks that occur.
PRM. add_initializerequest (initializerequest );
PRM. add_endrequest (endrequest );
 
// Executed anytime an async PostBack occurs.
Function Initializerequest (sender, argS)
{
// Change the container Div's CSS class to. Progress.
$ Get ( ' Container ' ). Classname =   ' SS ' ;
 
// Get a reference to the element that raised the PostBack,
// And disables it.
$ Get (ARGs. _ postbackelement. ID). Disabled =   True ;
}
 
// Executed when the async PostBack completes.
Function Endrequest (sender, argS)
{
// Change the container Div's class back to. Normal.
$ Get ( ' Container ' ). Classname =   ' Normal ' ;
 
// Get a reference to the element that raised the PostBack
// Which is completing, and enable it.
$ Get (sender. _ postbacksettings. sourceelement. ID). Disabled =   False ;
}
</ Script >