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 a 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="Button1_Click" Text="Button" />
    </ContentTemplate>
  </asp:UpdatePanel>
</div>

protected void Button1_Click(object sender, EventArgs e)
}

I’ll style the container div with CSS to add a simple border and set up a class for the progress state:

.Normal
}

Finally, hook up our event handlers for BeginRequest and EndRequest:

>