84

Tutorial: Cómo crear una animación de carga de contenido estilo Facebook

15350Puntos

hace 3 años

Curso de Animaciones para la Web
Curso de Animaciones para la Web

Curso de Animaciones para la Web

Crea animaciones de interfaces, maneja fotográmas en la web, aplica transiciones, transformaciones, timing y composición. Logra que tus sitios sean más dinámicos.

Sin importar la velocidad de internet que un usuario tenga, siempre se espera que al abrir una página web el sitio sea ágil. Si el usuario sabe lo que está sucediendo es más probable que sea paciente y piense que el sistema es rápido. Es ahí donde entra la pantalla de carga o placeholder, cuyo objetivo es brindarle a los usuarios que cuentan con una conexión lenta una mejor experiencia. De esta forma tendrán la sensación de que la aplicación tiene un buen rendimiento. Seguramente lo haz visto antes porque aplicaciones que usamos en nuestro día a día como Facebook y Slack lo tienen implementado.

2017-12-08 12.07.20.jpg

A continuación te mostraré un ejemplo sobre cómo crear esta animación para un sitio web. Tomaremos como ejemplo la forma en que se muestra un artículo del blog en platzi:

Captura de pantalla 2017-12-08 a la(s) 22.10.49.png

Lo primero que debemos hacer es llevar ese diseño a su forma más simple, este será el resultado final:

Cada que se hace un request al servidor, mientras se obtiene una respuesta se puede mostrar el estado de carga de inmediato. Una vez se tenga una respuesta, se cambia el estado de carga por los datos y el componente real. Esto se puede implementar con JavaScript puro o con alguna librería como React o Vue.

La estructura la crearemos con CSS, de esta forma tenemos la ventaja de que si en un futuro el diseño cambia sea fácil de modificar, además de que los recursos que requiere son mínimos.

¡Comencemos!

1. La estructura HTML

A continuación encontrarás cómo quedará la estructura HTML de nuestro pequeño proyecto. El truco para lograr este efecto está en que debemos rellenar los espacios en blanco con contenedores que funcionarán como mascaras. Más adelante encontrarás más detalles sobre esto.

<article class="container">
  <divclass="background">
    <divclass="left">
      <divclass="image"></div>
      <divclass="mask thick"></div>
    </div>
    <divclass="right">
      <divclass="bar"></div>
      <divclass="mask thick"></div>
      <divclass="bar"></div>
      <divclass="mask thin"></div>
      <divclass="bar medium"></div>
      <divclass="mask thick"></div>
      <divclass="bar small"></div>
    </div>
  </div>
</article>

2. Agregándo estilos a nuestro contenedor

Esta suele ser la parte más sencilla. Nuestro contenedor es un elemento article que tiene la clase container y que envuelve todo el contenido de nuestro componente. Debe estar centrado, tener un fondo blanco y un ancho máximo de 769px.

.container {
  background: white;
  border: 1px solid #e5e6e9;
  border-radius: 5px;
  max-width: 769px;
  padding: 1rem;
  margin: 0 auto;
}

3. Animación de fondo

La magia comienza en este punto. A nuestro elemento que tiene la clase background debemos agregarle un gradiente de color de fondo y después animarlo con keyframes. Nuestra animación se llamará preloadAnimation, será infinita y tendrá una duración de 2s.

.background {
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: preloadAnimation;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    display: flex;
		min-height: 100px;
}
@keyframes preloadAnimation{
    0%{
        background-position: -769px0
    }
    100%{
        background-position: 769px0
    }
}

4. Dándole forma a nuestro componente

Esta es la parte complicada. Lo que haremos a continuación es crear una serie de máscaras con un montón de elementos con fondo blanco para que se sobrepongan y tapen el gradiente.

Primero que nada, añadimos un par de estilos a la clase right para que ocupe todo el ancho restante.

.right {
  flex: 1;
}

Después agregaremos los estilos necesarios para crear el espacio designado a la imagen, el cual será un elemento con clase image que tendrá de alto y ancho 120px.

.image {
  width: 120px;
  height: 120px;
  background: transparent;
}

Los elementos que tienen la clase bar serán nuestras barritas que tienen gradiente. Estos elementos tendrán un alto de 22px y fondo transparente, para que se pueda ver el gradiente de nuestro elemento background.

.bar {
  height: 22px;
  background: transparent;
  position: relative;
  width: 100%;
}

A su vez, tendrán selectores after y before que servirán como máscaras para simular el espacio en blanco que se encuentra antes y después de cada barrita con gradiente. Estos selectores tendrán posición absoluta, fondo blanco y un ancho que irá de acuerdo al diseño.

.bar::before {
  position: absolute;
  content: "";
  left: 0;
  width: 2rem;
  height: 22px;
  background: white;
}
.bar::after {
  position:absolute;
  right: 0;
  height: 22px;
  content: "";
  background: white
}

Para definir el ancho, se agregaron las clases medium y small.

.bar.medium::after {
  width: 50%;
}
.bar.small::after {
  width: 75%;
}


Los elementos que tienen la clase mask servirán para simular los márgenes superiores e inferiores que existen entre cada barrita con gradiente. Esta clase les asignará un fondo blanco y ocuparán el 100% de ancho.

.mask {
  background: white;
  width: 100%;
}

Las clases thick y thin servirán para definir el ato de nuestros elementos de máscara.

.thick {
  height: 1.5rem;
}
.thin {
  height: 0.5rem;
}

Voilá! tenemos el resultado que queríamos. Si te gustó este tutorial o tienes alguna pregunta te invito a compartir tu comentario en la parte de abajo. Cuéntame también que otra cosa te gustaría aprender y trataré de hacerlo posible pronto ❤️.

Curso de Animaciones para la Web
Curso de Animaciones para la Web

Curso de Animaciones para la Web

Crea animaciones de interfaces, maneja fotográmas en la web, aplica transiciones, transformaciones, timing y composición. Logra que tus sitios sean más dinámicos.
Fannytaviles
Fannytaviles
fannytaviles

15350Puntos

hace 3 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
3
31298Puntos

Ohhh muchas gracias, he buscado un tutorial de esto como loco, ya que alguna vez leí por algún rincón en internet que se llamaba Skeleton Loader o algo así, pero ultimamente que busco con la palabrea skeleton me sale un framework de css xD.
Pregunta, yo diría que en Ux es un Empty State, pero este diseño que ya parece ser el contenido verdadero, tiene algún nombre? Saludos

3
21281Puntos
3 años

Se llama App Shell.

1
679Puntos

thanks you !
I gonna use my next project

1
4888Puntos

Muy bueno y util, me lo guardo como recurso 😉. Pero estaría bien que en platzi se realizara un curso de como controlar la caga de una web por js, no solo hacer el preload

Un saludo

1
7097Puntos

toma tu manita arriba por q si

0
7135Puntos

Amigos @platzi, seria genial que podamos guardar en alguna lista , los post que deseemos recordar, como este… 😄

excelente post

1
15350Puntos
3 años

Tomaremos en cuenta tu sugerencia! Gracias por leerme 😃

0
15224Puntos

Me gustaría aprender cómo implementar este placeholder en vueJS o ReactJS, también los placeholders que se hacen para las imágenes, así como GoogleDrive cuando abres una carpeta donde solo hay imágenes.

2
15350Puntos
3 años

Es fácil, cuando haces la petición cargas el estado a loading y una vez se tenga una respuesta ese estado vuelve a cambiar. Intentaré hacer un tutorial con esto para poder mostrarlo mejor 😃

0
3515Puntos

Excelente articulo, busque porque lo vi en linkedin pero no encontre nada hasta ahora, gracias. 😃

0
276Puntos

great…

Me gusta, muy bueno sigue adelante, te lo agradecemos…

0
40414Puntos

Hola Fanny, ¡muy interesante uso de css!
Me surge la duda, ¿sería mejor esta estrategia que crear una imagen animada en gif o apng?

2
15350Puntos
3 años

Siempre hacerlo con código va a ser mejor que usar una imagen. No importa el caso. Va a tener un mejor rendimiento y va a ser más fácil de modificar en caso de que el diseño cambie.

0
720Puntos

Excelente tutorial, en el paso intente hacerlo buscando en google pero fracase… 😢 pero ahora ya podre realizarlo gracias a ti. ¡muchas gracias!

2
15350Puntos
3 años

Suele tener distintos nombres, por eso es difícil de encontrarlo. Me da gusto que pude ayudarte 😃

0
10300Puntos

Muy bien 😄 esta bastante bueno el tutorial

0
3452Puntos

En el curso de animaciones para la web esta este ejercicio?