PreLoading in asp.net

i really want to how preloading works in asp.net?

for example when click on a button , an animated gif appears and after some seconds a panel or div a开发者_运维百科ppears! (like in many places in facebook)

how can i do that in asp.net?

(is jquery necessary for doing this job? if yes, which plugins?)

First is during page about to load

 protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
        pnlLoading.Visible = true;
    }

Second when I have update panel I use Update Progress to automatically handle it.

Third is for ajax calls using jQuery. When I'm about to make an ajax call I use this

$('#<%=updProgress.ClientID %>').css("display", "block");

and when the ajax call is finish, I use this

 $('#<%=updProgress.ClientID %>').css("display", "none");

Here are my loading indicator in the markup. These two are placed right after the body tag.

  <asp:Panel ID="pnlLoading" runat="server" Visible="true">
    <div class="progressBackgroundFilter">
    </div>
    <div class="processMessage">
        <img src="/_layouts/Img/ajax-loader.gif" alt="Loading" />
    </div>
</asp:Panel>
<asp:UpdateProgress ID="updProgress" runat="server">
    <ProgressTemplate>
        <div class="progressBackgroundFilter">
        </div>
        <div class="processMessage">
            <img src="/_layouts/Img/ajax-loader.gif" alt="Loading" />
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

And when the page are loaded I use this

 $(document).ready(function () {
        var objdiv = $('#<%=pnlLoading.ClientID%>');
        if (objdiv) {
            objdiv.css('visibility', 'hidden');
        }
        $('#<%=updProgress.ClientID%>').css("display", "none");     
    });

Hope this helps