Wednesday, December 12, 2012

Show Loading Image while Page loading in Jquery


A gif image will be show while the page is loading and it will be faded out once the page is done loading.

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
  <style type="text/css">
  #dvLoading
    {
        background:#000 url(loading.gif) no-repeat center center;
        height: 300px;
        width: 300px;
        position: fixed;
        z-index: 1000;
        left: 50%;
        top: 50%;
        margin: -25px 0 0 -25px;
    }
  </style>
    <script type="text/javascript">
        $(window).load(function () {
            $('#dvLoading').fadeOut(2000);
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="dvLoading"></div>
    </form>
</body>
</html>

No comments:
Write comments
Recommended Posts × +