Processing Bar while Page loads

Posted by Murugavelmsc under JavaScript on 7/15/2015 | Points: 10 | Views : 1413 | Status : [Member] | Replies : 1

Write New Post |

Search Forums | Answered

Resolved Posts |

Un Answered Posts |

Forums Home

Hi Experts,

I have created a page as follows:

<body id="body" onload="javascript:fnPageInitialise();">
<div> 
</div>
</body>

In the fnPageInitialise() has more time to load time to display the date.

So thats i want to display processing icon to user knows the pages is loading.

Browsers: IE

Thanks in advance.

Regards,
Murugavel S

Regards,
Murugavel S
murugavel.sadagopan@gmail.com
http://murugavelmsc.blogspot.in/

Reply | Reply with Attachment

Alert Moderator

Responses

Posted by: A2H on: 7/15/2015 [Member] [MVP] Silver | Points: 25

0	You can use the Jquery code to show a loading icon on pageload like given below <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head2" runat="server"> <title></title> <!-- jQuery Plugin --> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script type="text/javascript"> // Change the value 5000 to a limit till your Gridview load completely $(window).load(function () { $("#spinner").fadeOut(5000); }) </script> <style type="text/css"> #spinner { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; /Add a loading image here/ background: url(Your Loading Image Path) 50% 50% no-repeat #ede9df; } </style> </head> <body> <form id="form2" runat="server"> <asp:ScriptManager ID="ScriptManager2" runat="server" EnablePageMethods="true"> </asp:ScriptManager> <!-- Preloader --> <div id="spinner"></div> <div id="content"> <!-- Your content here--> </div> </form> </body> </html> Sample Demo here : http://jsbin.com/zufoyigote/edit?html,css,js,output Thanks, A2H My Blog Murugavelmsc, if this helps please login to Mark As Answer. \| Alert Moderator

You can use the Jquery code to show a loading icon on pageload like given below

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head2" runat="server">
    <title></title>
    <!-- jQuery Plugin -->
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  
    <script type="text/javascript">
        //    Change the value 5000 to a limit till your Gridview load completely
        $(window).load(function () { $("#spinner").fadeOut(5000); }) 
    </script>
   <style type="text/css">
    #spinner {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999;
        /*Add a loading image here*/
        background: url(Your Loading Image Path) 50% 50% no-repeat #ede9df;
        }
   </style>
</head>
<body>
    <form id="form2" runat="server">
    <asp:ScriptManager ID="ScriptManager2" runat="server" EnablePageMethods="true">
    </asp:ScriptManager>
    <!-- Preloader -->
    <div id="spinner"></div>
       
    <div id="content">
        <!-- Your content here-->       
    </div>
    </form>
</body>
</html>

Sample Demo here : http://jsbin.com/zufoyigote/edit?html,css,js,output

Thanks,
A2H
My Blog

Murugavelmsc, if this helps please login to Mark As Answer. | Alert Moderator

Latest Posts