Sunday, 9 September 2012

JQuery Loading animation in postback

I want to demonstrate in this article is how to make our web site is looking more attractive by putting an animation while loading the page in post back.

first we can create and design the loading animation from this website Here.

1- First we will create a simple button and do not forget to add the JQUERY reference classes like this.

<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="Scripts/jquery.effects.core.js" type="text/javascript"></script>

2- put a simple button 
 <asp:Button ID="btnSearch" runat="server" Text="Search"  />

3-After creating and downloading the animation as a .gif image put it like this.

<div style="text-align: center; vertical-align: middle; font-family: Verdana; color: Blue;
                        position: absolute; top: 50%; left: 50%; margin-left: -88px; font-size: small;
                        background-color: White; border:2px solid #f90;" id="dvProgress" runat="server">
                        Please Wait ...
                        <img src="images/ajax-loader.gif" id="loader" style="vertical-align: middle;" alt="Processing" />

4-Put the below JQUERY code.

 <script type="text/javascript">

$(document).ready(function () {

    $('#dvProgress').hide();  // This is to hide the animation progress at first time

       $("#btnSearch").click(function () {     // show the animation progress upon we click the search button

Note: as we know that how is the IE is sucks you will find in all other browsers that the animation running perfectly except the IE so put this extra line of  code like this. 

        setTimeout('document.images["loader"].src = "images/ajax-loader.gif"', 200);  

Happy Programming :)