Primero, vamos a definir qué es un preloader: una imagen o texto, que se muestra durante la carga de archivos que se usan en una página web y que luego desaparece al cargarse totalmente dichos archivos e imágenes.
Existen muchos plugins de preoladers que podemos encontrar en la red, y todos ellos muy buenos. Pero qué pasaría si necesitamos un simple código que no tenga necesidad de mucho más que sólo su función de mostrar el contenido una vez que se haya cargado completamente la web.
Para ello, usaremos jQuery 1.6+ y éste sencillo javascript, que podemos agregar en el header o footer:
$(window).load(function(){
$('#page-loader').fadeOut(500);
});Como podemos ver, en el con éstas 3 líneas de javascript, ya tendríamos practicamente todo hecho, a excepción que falta estilizar para que se vea bien nuestro preloader y agregar a nuestro html el siguiente código debajo de la etiqueta <body>.
<div id="page-loader"><span class="preloader-interior"></span></div>
Una vez teniendo esto listo, procedemos a crear la hoja de estilos, el cuál se llamara «css.css» que tendrá los estilos del id «page-loader»:
#page-loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background: #FFF none repeat scroll 0% 0%;
z-index: 99999;
}
#page-loader .preloader-interior {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #3498db;
-webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */}
#page-loader .preloader-interior:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #e74c3c;
-webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */}
#page-loader .preloader-interior:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #f9c922;
-webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(0deg); /* IE 9 */ transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ }
100% {
-webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(360deg); /* IE 9 */ transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ }
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(0deg); /* IE 9 */ transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ }
100% {
-webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(360deg); /* IE 9 */ transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ }
}El código completo sería éste (guardarlo como index.html):
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>Preloader Web</title>
<link href="css.css" type="text/css" rel="stylesheet" />
<script>
$(window).load(function(){
$('#page-loader').fadeOut(500);
});
</script>
</head>
<body>
<div id="page-loader"><span class="preloader-interior"></span></div>
</div>
</body>
</html>Repasando un poco, nos daremos cuenta que lo que hace toda la magia, es el javascript de 3 líneas. Puedes ver una demo aquí, y descargarte el código completo aquí.
