DotNetIt: Showing Loading Symbol Until Page Loads Completly

Its good to restrict Page Access until The Page Completely Loaded.
Demo
HTML to be added to the Page

<div id="spinner"></div>

<div id="spinner"></div>

CSS on the Page

view plain copy to clipboard print ?

#spinner {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(Image/preloader-w8-cycle-black.gif) 50% 50% no-repeat #808080;
}

#spinner {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(Image/preloader-w8-cycle-black.gif) 50% 50% no-repeat #808080;
}

JavaScript On the Page

view plain copy to clipboard print ?

<script type="text/javascript">
// <![CDATA[
$(window).load(function () { $("#spinner").fadeOut("slow"); })
// ]]></script>

<script type="text/javascript">
// <![CDATA[
$(window).load(function () { $("#spinner").fadeOut("slow"); })
// ]]></script>

Complete HTML

view plain copy to clipboard print ?

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style>
#spinner {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
*background: url(Image/preloader-w8-cycle-black.gif) 50% 50% no-repeat #808080;
}
</style>
<script type="text/javascript">// <![CDATA[
$(window).load(function () { $("#spinner").fadeOut("slow"); })
// ]]></script>
</head>
<body>
<div id="spinner"></div>
</body>
</html>

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <style>

        #spinner {
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9999;
            *background: url(Image/preloader-w8-cycle-black.gif) 50% 50% no-repeat #808080;
        }
    </style>
    <!-- Preloader --><script type="text/javascript">// <![CDATA[
                      $(window).load(function () { $("#spinner").fadeOut("slow"); })
                      // ]]></script>
</head>
<body>
<div id="spinner"></div>
</body>
</html>

DotNetIt

DotNetIt

Showing Loading Symbol Until Page Loads Completly

Showing Loading Symbol Until Page Loads Completly

Wednesday, June 19, 2013

0 comments:

Post a Comment

About Me

Blog Archive