Básicamente es indicador de carga que aparece cuando el resto del sitio sigue descargándose. También se les conoce como “Loader”, por lo general son animaciones sencillas que le dan la impresión al usuario de que algo está sucediendo mientras esperan que el servidor procese el contenido.
¿Son importantes?
La respuesta corta es sí, pero no son críticos. Cada día contamos con conexiones más rápidas siempre exista la posibilidad de tiempos relativamente largos siendo esta la oportunidad perfecta para mostrarlos y mejorar la experiencia de los usuarios evitando que piensen que algo salió mal o se desesperen, desafortunadamente siempre es un elemento que se olvida incluir en los sitios.
¿Cómo deben de ser?
Hay muchos ejemplos desde lo más básico hasta lo más complejo, con animaciones envolventes que enganchan a los usuarios durante los tiempos de espera; sin embargo los más complejos toman mucho tiempo para su animación e implementación, en la mayoría de casos un circulo animado, logos pulsantes o barras de carga son las opciones más populares.
Acá te compartimos un par de ejemplos que podrás usar en tus proyectos.
Archivo GIF
En esta página encontrarás una gran cantidad de animaciones y además te permite personalizar colores, duración y rapidez entre otras características. Una gran opción si buscas algo sencillo sin complicaciones.
Una vez que hayas encontrado la animación que te guste la podrás descargar como GIF, SVG, PNG animado e incluso generar su propio CSS para animarlo.
.preloader {
background-image: url();
background-position: center;
background-repeat: no-repeat;
background-size: 60px;
}Habiendo descargado la animación como GIF, declararemos la imagen como fondo del elemento contenedor y la posicionaremos al centro del elemento.
See the Pen
dyyOZEd by CSS Tianguis (@css-tianguis)
on CodePen.
Imagen PNG con Animación CSS3
Esta idea es de las más efectivas ya que al utilizar una imagen PNG es soportada por la mayoría de los exploradores.
Básicamente colocamos una imagen dentro de un elemento con una clase y posteriormente declarar las propiedades CSS.
HTML e imagen
<div class="preloader"><img alt="preloader" /></div>Como ven no es necesario nada más que eso, el tamaño de la imagen podría ser declarado o como lo veremos en nuestro caso se ajustará con CSS al 100% de su contenedor, por lo que solo tienen que declarar el tamaño del elemento que contendrá a la imagen.
La animación CSS
.preloader {
animation:spin .7s linear infinite;
}
.preloader img {
width: 100%;
height: auto;
}
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }Agregamos propiedad animation a la clase de nuestro elemento y se compone de nombredelaanimacion, duración y número de iteraciones, que en este caso requerimos que la animación se repita una y otra vez por lo que usaremos infinite
See the Pen
jOOVard by CSS Tianguis (@css-tianguis)
on CodePen.
Diséñalo tu mismo utilizando una App de diseño
Si cuentas con Figma o Sketch puedes utilizar este template para crear tu propio preloader y podrás personalizar el color.
Cambia el color sin utilizar una app
Si no tienes Figma o Sketch puedes cambiar el color de la imagen usando CSS, sólo debes agregar la propiedad filter: hue-rotate e ir ajustando hasta encontrar el color que deseas.
.preloader img {
width: 100%;
filter: hue-rotate(90deg);
}Esto hará que la imagen cambie de color sin necesidad de editarla en tu computadora.
See the Pen
Preloader PNG CSS Animacion - 2 by CSS Tianguis (@css-tianguis)
on CodePen.
Amazon Auto Links: No products found.