En este tutorial vamos a aprender a crear un Preloader animado con CSS3, muchos se preguntarán, porque un preloader, si vivimos las bondades de la banda ancha, todo es inmediato, y bueno, en parte tienen razón, pero… también vivimos en una época en la que la experiencia de uso es de vital importancia, así es que entremos en campaña #NoMásPáginasRotas, asegurémonos que todo esté cargado antes de presentárselo a nuestros visitantes y vivamos el sueño de una página que responde de maravilla.
Tabla de ingredientes
Para este tutorial vamos a necesitar lo siguiente:
- Generosa pieza de HTML: Necesario para crear la estructura donde vivirá nuestro Preloader.
- Porciones abundantes de CSS: Con las cuales vamos a crear el diseño y las animaciones.
- Una pizca de JavaScript: nos ayudara a que funcione correctamente nuestro Preloader.
- IDE de tu elección: Ya sea Dreamweaver, Sublime, Notepad++, la elección es tuya.
- Una sonrisa: Porque siempre es bueno trabajar alegre y con mood positivo.
Por el momento son todos los ingredientes, pero puedes agregar de manera opcional algo de música y tu bebida favorita, el chiste es disfrutar lo que estamos haciendo, una vez listos los ingredientes, manos a la obra.
Comenzamos con la estructura del sitio:
Vamos a comenzar creando nuestro HTML, vamos a agregarle un par de imágenes y texto para tener algo de contenido, para poder mostrar la precarga, vamos a comenzar:
Vamos a crear nuestro header, y un poco de imágenes para que haya algo de contenido, nuestro HTML debe de lucir de la siguiente manera:
El código es el siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Tutorial Preloader</title> </head> <body> <header> <img src="img/logotipoActivRgb.jpg" alt=""> <h1>Un preloader para Gobernar al mundo</h1> </header> <div> <div> <img src="img/fondoPaisaje.jpg" alt="Paisaje de fondo"> </div> <div> <h2>Perfecto para usarse en "One Page Sites"</h2> <p>Tambien cuando es abundante la carga de información que hay dentro de nuestro sitio, contamos con muchas interacciones o con abundantes imágenes</p> </div> <div> <img src="img/fondocielo.jpg" alt="Paisaje de fondo"> </div> </div> <footer> <p></p> </footer> </body> </html> |
Al crear un sitio web es importante comenzar con la estructura, por eso comenzamos creando el HTML, después nos encargaremos del diseño utilizando nuestras hojas de estilo en cascada, en este punto luce algo triste nuestro HTML, pero eso lo vamos a arreglar en un santiamén.
Primero vamos a dar estilos a nuestro header, vamos a asignarle un color de fondo con transparencia, vamos a acomodar nuestro logo y nuestro tagline:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
header{ width: 100%; height: 80px; background-color: rgba(255, 255, 255, .9); position: fixed; top: 0; left: 0; } header img{ width: 150px; float: left; margin: 10px 20px; } header h1{ padding: 27px 0 0 0; color: #333333; font-size: 1.7em; } |
Vamos a agregar un par de estilos complementarios para dar vida a nuestro diseño, también dar un color de fondo, y por último vamos a crear un contenedor para nuestras imágenes, esto lo hacemos de la siguiente manera:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
h1, h2, h3, h4, h5, p{ margin: 0; padding: 0; font-family: helvetica, arial, sans-serif; } h1, h2, h3, h4, h5{ text-transform: uppercase; } img{ max-width: 100% } .body{ margin: 0; padding: 0; } .centrado{ text-align: center; } .wrapper{ width: 100%; background-color: #3e505b; } .wrapper960{ width: 960px; margin: 0 auto; } .azul{ background-color: #61737f; padding: 40px 0; } .azul p, .azul h2{ color: #fff; padding: 10px 20px; width: 920px; margin: 0 auto; } |
Ahora nuestro diseño luce así, ¿mucho mejor no?
Adicional, vamos a agregar un par de contenedores para nuestro preloader, los vamos a crear justo a bajo de nuestra etiqueta <body> vamos a crear un div que nos sirva de contenedor para el preloader, y otro div que será nuestro preloader como tal, esto va a quedar de la siguiente manera:
|
1 2 3 |
<div id=”loader-wrapper”> <div id=”loader”></div> </div> |
Listo, el escenario para nuestro Preloader está terminado, buen trabajo muchachón, date una palmada en la espalda, ve por una coca o tu bebida favorita y continuemos…
Crear animación de preloader utilizando únicamente CSS
Continuemos con nuestro preloader, vamos a crearlo utilizando únicamente estilos, vamos a crear lo siguiente:
- Una pantalla que cubra la página mientras ésta se está cargando.
- Elementos gráficos del preloader.
- Animación para el preloader.
Antes de comenzar, vamos a explicar un poco como es que funciona este preloader, básicamente lo que vamos a hacer es colocar sobre nuestra página web un fondo que nos va a servir como telón, este es el que impedirá que se vea como se arma a pedazos nuestro sitio web, sobre este telón vamos a tener corriendo nuestra animación.
Si nosotros viéramos únicamente este telón, la percepción que comúnmente se tiene es que la página no está cargando, o ha dejado de funcionar, es por esto que agregamos un elemento animado, de esta manera nosotros tenemos la sensación de que algo está pasando, y ¡así es! Ya que nuestra página se está cargando. Cuando nuestra página haya terminado de cargar, por medio de un sencillo pero poderoso combo de JavaScript con CSS, nos encargaremos de desaparecer el telón junto con el Preloader, para dar paso a nuestra página web completamente cargada.
Ahora sí, comencemos…
Teniendo nuestra lista, vamos a comenzar en orden, comencemos utilizando el div con id loader-wrapper que creamos en nuestro HTML, éste nos servirá como pantalla que se encargará de cubrir nuestro HTML hasta que este esté cargado, será el telón que evitará que se vea el montaje de nuestra obra, para esto, en nuestro archivo css vamos a crear los siguientes estilos:
|
1 2 3 4 5 6 7 8 |
#loader-wrapper{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100 } |
Lo que hicimos fue darle un tamaño de ancho y alto de 100% y una posición fija, le damos un z-index muy alto para que este contenedor este por encima de todos nuestros elementos.
El elemento preloader
Ahora vamos a crear nuestro elemento de preloader que vivirá sobre nuestro telón, para esto vamos a utilizar el div con id loader que creamos en nuestro HTML, y vamos a utilizar los siguientes estilos.
|
1 2 3 4 5 6 7 8 9 10 11 |
#loader{ display: block; position: relative; left: 50%; top: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; border: solid #556270 3px; z-index: 150; } |
Con esto le decimos a nuestro div #loader que tenga una posición relativa y la colocamos justo a la mitad de la página (left 50%, top 50%), y lo centramos utilizando márgenes negativos, como nuestro div es un cuadrado que mide 100px , necesitamos un margen negativo de la mitad de su tamaño en top y en left, en este caso son 50px top y 50px left, creamos un borde azul oscuro solido de 3 pixeles alrededor del cuadrado y por ultimo vamos a dar un z-index mayor al de nuestro telón, para poder posicionar nuestro preloader sobre él.
Utilizando pseudo-elementos de CSS para ampliar nuestro preloader
Vamos a crear dos bordes extra además de nuestro cuadrado, dentro de nuestro borde azul, para esto vamos a utilizar nuestros siempre confiables pseudo-elementos de CSS.
Recordemos que los pseudo-elementos de CSS nos sirven para poder dar estilos a partes específicas de nuestro elemento, con ellos podemos agregar contenido antes y después de nuestro elemento, si quieres aprender a fondo css3, te recomendamos nuestro diplomado de Front-End.
En nuestro caso, vamos a agregar dos cuadrados más, para esto vamos a utilizar nuestros pseudo-elementos ::before y ::after, vamos a crear los siguientes estilos:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
#loader:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 4px solid #4ECDC4; } #loader:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border: 2px solid #C7F464; } |
Con esto agregamos un cuadrado cyan y uno verde dentro de nuestro cuadrado azul, con esto terminamos de armar nuestro preloader creado únicamente con el poder de nuestras hojas de estilo, pero… prepárense… ¡aquí viene lo bueno!
Animando nuestro preloader
Para que nuestro preloader no luzca triste y decaído, vamos a animarlo utilizando una propiedad muy interesante de CSS3, la propiedad animation, ésta propiedad nos permite utilizar keyframes, dentro de animation nosotros vamos a ligar nuestros keyframes, vamos a indicar cuál es su duración, de qué tipo de animación se trata y cuantas veces queremos que se repita.
Primero vamos a crear y agregar los estilos de la animación para nuestros 3 cuadrados, esto lo hacemos de la siguiente manera:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#loader { -webkit-animation: giro 10s linear infinite; animation: giro 10s linear infinite; } #loader:before { -webkit-animation: giro 5s reverse infinite; animation: giro 5s linear infinite; } #loader:after { -webkit-animation: giro 2s linear infinite; animation: giro 2s linear infinite; } |
Ahora vamos a crear los keyframes para nuestros cuadrados:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
@-webkit-keyframes giro { 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 giro { 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 */ } } |
Como nuestro objetivo es presentar la animación en todos los navegadores posibles, utilizamos animation y también animation con su vendor prefix webkit, lo mismo hacemos con transform, utilizamos los vendor prefix para que se muestre correctamente en todos los navegadores.
Ahora si listo, le asignamos a cada cuadrado una duración de giro diferente, es momento de guardar y probar. Tu animación debe de estar corriendo de maravilla en estos momentos, si no estás conforme con la duración de giro de cada elemento, juega un poco con los valores y modifica la duración en segundos dentro de animate.
Sólo nos queda un sencillo paso y es…
Agregar la funcionalidad de Preloader utilizando jQuery
Este último paso es muy sencillo ya que únicamente necesitamos saber en qué momento se terminó de cargar nuestro sitio web, para indicarle a nuestro preloader que desaparezca al momento en que esto suceda con el fin de tener una increíble experiencia de uso.
Como vamos a utilizar jQuery, lo primero que tenemos que hacer es incluirlo dentro de nuestro HTML, puedes descargarlo y agregarlo a tu carpeta de archivos JavaScript, nosotros en este caso vamos a agregarlo directamente linkeandolo desde Google CDN, vamos a agregar la ruta antes de que termine la etiqueta de cierre del body de nuestro sitio web, quedaría de la siguiente manera:
|
1 2 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> </body> |
Listo, así de fácil agregamos jQuery a nuestro proyecto, ahora vamos a utilizarlo para detectar cuando termine de cargar nuestra página y en cuanto termine vamos a utilizar un fade out para que suavemente desaparezca nuestro preloader.
Vamos a crear un archivo de javascript, lo vamos a llamar custom.js y lo vamos a agregar justo debajo de nuestro jQuery, es muy importante el orden ya que necesitamos cargar primero nuestra librería de jQuery, de lo contrario no va a funcionar, quedaría de la siguiente manera:
|
1 2 3 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script src="js/custom.js"></script> </body> |
Dentro de nuestro archivo custom.js vamos a escribir el siguiente código:
|
1 2 3 4 |
$(window).load(function(){ $("#loader").fadeOut(); $("#loader-wrapper").delay(500).fadeOut("slow") }) |
Lo que estamos haciendo es crear una función que se active cuando nuestra página haya terminado de cargar, como queremos que el código se ejecute cuando estén cargados absolutamente todos los elementos de la página, vamos a utilizar el método $(window).load
En cuanto detecte que todo está cargado, nuestra función va a desaparecer primero nuestra animación del Preloader y medio segundo después, desaparecerá poco a poco nuestro telón.
Eso es todo el código que necesitamos, como ves es muy sencillo, ahora solo resta probar nuestro sitio web en tu navegador de confianza y ¡voila! #NoMasSitiosRotos. Utilízalo sabiamente en tus proyectos y brinda a tus visitantes una increíble experiencia de usuario.
CSS3 no sólo se limita a agregar tipografías y bordes redondeados a nuestros sitios web, nos brinda un enorme abanico de posibilidades como pudimos ver en este tutorial, así es que es muy importante tenerlo dentro de nuestro set de herramientas front-end. Si quieres volverte un master, te recomendamos nuestra Especialidad Diseño Web Responsivo. El programa incluye CSS Avanzado.
Si quieren descargar el código fuente terminado para usarlo como referencia, pueden hacerlo directamente desde este link.