How to add a CSS 3 Preloader to your Web site

How to add a CSS 3 Preloader to your Web site  on 4 Steps - Copy and Paste code


1. Loading JQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

2. Adding the function

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


3. Writing the CSS

#spinner {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 999999999;
background: #ffcc00;
}


4. Adding the HTML (On the body of the page)

<div id="spinner"> What ever loader image </div>