Mostrar un Esqueleto antes de Cargar el contenido de una Web

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.

 

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required

4
Comentarios

avatar
2 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
Diseña Tu Primera Página Web con Bootstrap 4 | Blog Collective Cloud PeruDevs - Collective Cloud PerúCollective Cloud PeruJaime Vici Oso Recent comment authors
  Subscribirse  
newest oldest most voted
Notificar a
Jaime Vici Oso
Guest
Jaime Vici Oso

buen resumen

Collective Cloud Peru
Guest
Collective Cloud Peru

Gracias Jaime, síguenos en nuestras redes sociales.

Devs - Collective Cloud Perú
Guest
Devs - Collective Cloud Perú

Gracias Jaime, síguenos en nuestras redes sociales.

trackback
Diseña Tu Primera Página Web con Bootstrap 4 | Blog Collective Cloud Peru

[…] Devs – Collective Cloud Perú en Mostrar un Esqueleto antes de Cargar el contenido de una Web […]