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>