Animated Loading Gif ...

In this tutorial you will know  how to display animated loading GIF image

Here is the HTML Markup of the page:

<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<asp:TextBox ID="txtContactsSearch" runat="server"></asp:TextBox>
<cc1:AutoCompleteExtender ServiceMethod="SearchCustomers" MinimumPrefixLength="2"
    CompletionInterval="100" EnableCaching="false" CompletionSetCount="10" TargetControlID="txtContactsSearch"
    ID="AutoCompleteExtender1" runat="server" FirstRowSelected="false" OnClientHiding="OnClientCompleted"
    OnClientPopulated="OnClientCompleted" OnClientPopulating="OnClientPopulating">
</cc1:AutoCompleteExtender>
</div>

Here we will add an ASP.Net AJAX AutoCompleteExtender with three client side events OnClientHiding, It used to display the loading GIF image when the call is made to search the records and also hides it when the records are populated.

 Client Side Methods
<script type="text/javascript">
function OnClientPopulating(sender, e) {
    sender._element.className = "loading";
}
function OnClientCompleted(sender, e) {
    sender._element.className = "";
}
</script>

This is the css code you must to add in the HEAD section or CSS class

<style type="text/css">
.loading
{
    background-image: url(images/loader.gif);
    background-position: right;
    background-repeat: no-repeat;
}
</style>

 Original Source: