Código Javascript
:
Ver original<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3 Preloader Animation </title>
<style type="text/css">
/* Full Width Progress Bar */
#preloader {
width:100%;
height:5px;
background:#000;
top:50%;
position:absolute;
}
.expand {
width:100%;
height:1px;
margin:2px 0;
background:#2187e7;
position:absolute;
box-shadow:0px 0px 10px 1px rgba(0,198,255,0.7);
-moz-animation:fullexpand 2000ms cubic-bezier(1.000, 0.610, 0.970, 0.000); /* Set the duration of the animation */
-webkit-animation:fullexpand 2000ms cubic-bezier(1.000, 0.610, 0.970, 0.000);
}
@-moz-keyframes fullexpand {
0% { width:0px;}
100%{ width:100%;}
}
@-webkit-keyframes fullexpand {
0% { width:0px;}
100%{ width:100%;}
}
</style>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var ua = $.browser; /* Create a variable for browser info */
$('.container').hide(); /* Hide the content */
/* If the Version or Firefox is < or = 5.0 the preloader not display, the same function applies to old Version Safari and Chrome and finally Opera and IE they don't support CSS3 Animation */
if (ua.mozilla && ua.version <='5.0' || ua.safari && (navigator.appVersion.indexOf('3.') != -1) || ua.opera || ua.msie){
/* If the condition is true the content will be displayed immediately */
$('.container').show();
}
else { /* Otherwise appears the preloader */
/* Insert the markup preloader usign jQuery */
$('body').append('<div id="preloader"><span class="expand"></span></div>');
/* The animation during 2sec, change the delay parameter to extend or decrase the animation, remember to change the duration of the animation also in CSS */
$('#preloader').delay(2000).fadeOut('slow', function() {
$('.container').fadeIn('fast');
});
}
});
</script>
</head>
<body>
<div class="container">
aqui tu página
</div>
</body>
</html>
Con copiar y pegar basta, no puedo creer que te parezca complicado, simplemente parate a leerlo con detenimiento (traducelo si te hace falta) y verás como no solo entiendes ese ejemplo, si no que puedes llegar a crear uno propio.
Un saludo