Mostrar un Esqueleto antes de Cargar el contenido de una Web

Articulos CSS HTML 5 JavaScript Tutoriales | | Comunidad: Crear un Post, Eventos Devs, Foro

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
Subscribirse
Notificar a
guest
4 Comments
antiguos
nuevos más votado
Inline Feedbacks
View all comments
Jaime Vici Oso
Jaime Vici Oso
3 años atrás

buen resumen

Collective Cloud Peru
Collective Cloud Peru
Reply to  Jaime Vici Oso
3 años atrás

Gracias Jaime, síguenos en nuestras redes sociales.

Devs - Collective Cloud Perú
Devs - Collective Cloud Perú
Reply to  Jaime Vici Oso
3 años atrás

Gracias Jaime, síguenos en nuestras redes sociales.

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

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