Processing Bar while Page loads

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

I have created a page as follows:

<body id="body" onload="javascript:fnPageInitialise();">
<div> <!-- mainForm -->
</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/



Responses

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

Up
0
Down
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

Login to post response