ASP.NET Ajax control toolkit animation during PostBack

Question

I have some web page with some content and a button. What I would like to do is to implement such behaviour:

1. User is pressing the button.
2. Before any time consuming operation starts, animation appears. 2a. Animation must be on the top of the page. I do not want to underlying page dissapear for the time when some data is processed.
3. Data processing is finished, animattion is hidden and page is re-rendered.

I do not want to use jQuery to achieve this and the animation must work on IE and Firefox.

I am using Ajax Control Toolkit library and I whish to avoid any other external libraries.

How to do this? My first and only idea so far is to put whole page on the UpdatePanel and then put somehow UpdateProgress on top of it.

Answer 1

How about setting up an animation target? Inside each animation definition in the UpdatePanelAnimationExtender?

<Sequence>
  <EnableAction Enabled="false" />
  <Color AnimationTarget="MyContent"
    Duration="1"
    StartValue="#FF0000"
    EndValue="#666666"
    Property="style"
    PropertyKey="backgroundColor" />
  <Color AnimationTarget="MyContent"
    Duration="1"
    StartValue="#FF0000"
    EndValue="#666666"
    Property="style"
    PropertyKey="backgroundColor" />
  <EnableAction Enabled="true" />
</Sequence>