Mostrar un Esqueleto antes de Cargar el contenido de una Web

3 minuto(s)

Demo Github

Existen muchas formas de cargar el contenido de una página web, los desarrolladores siempre han intentado innovar y parte de ello es el paradigma del diseño atómico, este paradigma es parte de las tendencias y mejoras en lo que se refiere a dar una mejor UX con la manipulación adecuada de las UIs.

 

Muchas aplicaciones tanto Web, Desktops o Móviles usan esta nueva forma de hacer esperar al usuario antes que cargue el contenido, vamos a usar solamente CSS con animaciones junto a HTML y jQuery daremos este bonito efecto.

Las propiedades CSS

Lo que hacemos es poner fondos de color gris que simulan bloques estáticos y encima un efecto de arrastre hacia el lado derecho.

Explicare el modulo de la parte izquierda, para los demás modulo solo varia el nombre de la clase y elementos HTML.


Si ven el CSS son propiedades conocidas y también la llamada a la animación.


Mediante la propiedad animation instancio a la animación loading que ejecutará el efecto cuando el usuario ingrese a la aplicación.

Ocultando y aplicando clases con jQuery

Como cada elemento esta dentro de un Div y cada Div tiene una clase, les quitare la clase que tiene por defecto y les aplicare una nueva para que el efecto finalice de manera apropiada.

Consideración

Debes tener en cuenta que los elementos los estamos cargando con un display: none y con jQuery le estamos quitando esa propiedad que pertenece a la clase oymc ya que dichos elementos html deben mostrarse una ves terminado el tiempo de espera que le indique en mi función setTimeout. Yo le estoy dando 4,4 segundos.


Espero que te sirva de mucho este artículo y no olvides seguirnos en nuestras redes sociales.