Loading gif to run using JQuery

I'm using 开发者_Go百科ASP.NET 3.5 Webforms. Basically, when an user causes any sort of postback (button click, switch tab, change dropdown, etc), I want the loading gif to pop up and then end right after the page completely loads. I have an ASP.NET solution (UpdateProgress) but that gets messy if you use more than one UpdatePanel. I'm not great with JQuery or Javascript, but I figured someone must have solved this problem before.

Any help/assistance is greatly appreciated.

I don't know ASP.NET very well but I assume you can access the elements that the user can click on and create postbacks, so the first step would be to look at jQuery's click() function: http://api.jquery.com/click/

With this, you can show a hidden HTML element that contains a little loading GIF to hide the page under the page has loaded, I use something like this:

#loader
{
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../image/ajax-loader.gif) no-repeat center center #f1ede5;
    z-index: 2147483647;
}
...
<div id="loader"></div>

You can get a nice GIF animation from http://ajaxload.info/