Gridview loading animation using JQuery is a still frame i.e. does not animate

[koteg]

Hello and thanks for looking.In my earlier project, I was using an UpdatePanel to show the loader gif when I was busy creating data to bind my Gridview with. I wanted to move this part of the code over to JQuery so I replace the UpdatePanel with an img tag linking to the gif after looking at this solution(Page loading animation)In my index.html page I had \[code\] <script> $(document).ready(function () { $('#loadingImage').hide(); }); function ShowLoaderImage() { $('#loadingImage').show(); } </script>\[/code\]and I called ShowLoaderImage from the asp:Button I was using to populate the source of the Gridview.\[code\]<asp:Button ID="View_Data_Button" CssClass="dataButton" OnClick="View_Data_Button_Click" OnClientClick="ShowLoaderImage()" runat="server" Text="View Data" />\[/code\]I expected the image to start spinning when I click the button to load the GridView, and disappear when done loading the GridView since document.ready is raised then as well. Instead, I see a frozen frame of the gif--no animations. How can I fix this?