Las pantallas de esqueleto son una parte integral de la retención de visitantes en las tendencias de diseño moderno. Crean una ilusión de velocidad y gestionan las expectativas de los usuarios al mantenerlos informados sobre el estado del contenido de una página. Una de las soluciones más esenciales pero subestimadas que ofrecen las pantallas de esqueleto es su ayuda para evitar Cambio de diseño acumulativo (CLS), que permite que el contenido se muestre todo a la vez en lugar de secuencialmente, ya que cargas.

¿Está listo para hacer que sus interfaces sean más intuitivas y expresivas mediante la implementación de pantallas de esqueleto en sus propios proyectos? He aquí cómo empezar.

Diseñar el diseño de la página web

Diseñar un diseño de página web le ayuda a cristalizar sus expectativas. Debe establecer su objetivo, definir el diseño, agregar las páginas requeridas y hacerla accesible y receptiva para diferentes tamaños de pantalla. Por ahora, considere un diseño simple con una imagen de portada, una imagen de perfil, un pequeño texto y botones de llamada a la acción.

Una vez que haya redactado el diseño del diseño, ya sea utilizando papel o una aplicación como Figma o Adobe XD, es el momento de preparar la estructura HTML.

Construye la estructura básica

Crea un nuevo archivo index.html y escribe algo de HTML para el diseño dentro de un padre con class = "contenedor-perfil". Agregar class = "esqueleto" a cada elemento para aplicar el efecto de carga de la pantalla de esqueleto. Eliminarás esta clase cuando el contenido se cargue con JavaScript.

Nota: No olvide vincular los archivos CSS y JavaScript en el encabezado de su index.html Archivo.

John Doe

Ingeniero de software @ Google || Desarrollador Full Stack || Autodidacta

Bangalore, Karnataka, India • Datos de contacto


534 contactos






Mensaje
Más

Empiece a diseñar su página

Aplicar los atributos básicos de CSS como margen, Familia tipográfica, y color sobre todo el cuerpo.

cuerpo {
 margen: 0;
 familia de fuentes: Arial;
 color: rgba (255, 255, 255, 0.9);
}

Agregar efecto de carga

Para agregar un efecto de carga, agregue un ::despuéspseudo-elemento a la clase de esqueleto que se mueve de la izquierda (-100%) a la derecha (100%) durante uno o dos segundos, lo que da como resultado una animación brillante.

.skeleton {
 posición: relativa;
 ancho: contenido máximo;
 desbordamiento: oculto;
 radio del borde: 4px;
 color de fondo: # 1e2226! important;
 color: transparente! importante;
 border-color: # 1e2226! important;
 selección de usuario: ninguno;
 cursor: predeterminado;
}
.skeleton img {
 opacidad: 0;
}
.skeleton:: after {
 posición: absoluta;
 arriba: 0;
 derecha: 0;
 abajo: 0;
 izquierda: 0;
 transformar: translateX (-100%);
 imagen de fondo: degradado lineal (
 90 grados,
 rgba (255, 255, 255, 0) 0,
 rgba (255, 255, 255, 0,2) 20%,
 rgba (255, 255, 255, 0,5) 60%,
 rgba (255, 255, 255, 0)
 );
 animación: brillo 2 s infinito;
 contenido: '';
}
@keyframes brillar {
 100% {
 transformar: translateX (100%);
 }
}

Estilo de las imágenes

Ahora, diseñemos el perfil y la imagen de portada. No olvide configurar desbordamiento: oculto; para evitar inconsistencias.

img {
 ancho: 100%;
 alineación vertical: medio;
}
.profile-container {
 ancho: 95%;
 ancho máximo: 780px;
 margen: 0 automático;
 radio del borde: 8px;
 margen superior: 32px;
 color de fondo: # 1e2226;
 desbordamiento: oculto;
 posición: relativa;
}
.cover-img {
 ancho: 100%;
 desbordamiento: oculto;
 color de fondo: # 1e2226;
 relación de aspecto: 4/1;
}
.profile-img {
 radio de borde: 50%;
 ancho: 160px;
 altura: 160px;
 borde: 4px sólido # 000;
 color de fondo: # 1e2226;
 margen: 0 automático;
 posición: relativa;
 desbordamiento: oculto;
 abajo: 100px;
}

Hágalo receptivo

Para asegurarse de que su diseño responda en diferentes pantallas, aplique las consultas de medios en consecuencia. Si eres un principiante en el desarrollo web, debes aprender cómo utilizar consultas de medios en HTML y CSS porque son muy importantes a la hora de crear sitios web adaptables.

@media (ancho máximo: 560px) {
 .profile-img {
 ancho: 100px;
 altura: 100px;
 abajo: 60px;
 }
}

Estilo del texto

Diseñe el texto estableciendo un margen, tamaño de fuente, y peso de la fuente. También puede cambiar el color del texto, agregar un encabezado, párrafo o ancla etiquetar según sus preferencias. Agregar un efecto de desplazamiento a la etiqueta de anclaje es útil porque le permite al usuario conocer un enlace.

.profile-text {
 margen superior: -80px;
 relleno: 0 16px;
}
.profile-text h1 {
 margen inferior: 0;
 tamaño de fuente: 24px;
 desbordamiento: oculto;
}
.profile-text p {
 margen: 4px 0;
 desbordamiento: oculto;
}
.profile-text h5 {
 margen superior: 4px;
 tamaño de fuente: 14px;
 margen inferior: 8px;
 peso de fuente: 400;
 color: # ffffff99;
 desbordamiento: oculto;
}
.profile-text a {
 color: # 70b5f9;
 tamaño de fuente: 14px;
 decoración de texto: ninguna;
 peso de fuente: 600;
}
.profile-text a: hover {
 color: # 70b5f9;
 decoración de texto: subrayado;
}

Estilo de la CTA

Un llamado a la acción (CTA) es importante porque generalmente querrá convertir las visitas de sus usuarios de alguna manera. Darle un color que se note fácilmente ayudará a que su CTA se destaque en la página.

.profile-cta {
 relleno: 16px 16px 32px;
 pantalla: flex;
}
.profile-cta a {
 relleno: 6px 16px;
 radio del borde: 24px;
 decoración de texto: ninguna;
 bloqueo de pantalla;
}
.message-btn {
 color de fondo: # 70b5f9;
 color: # 000;
}
.more-btn {
 color: heredar;
 borde: rgba sólido de 1px (255, 255, 255, 0.9);
 margen izquierdo: 8px;
}

Producción:

Desactivar el efecto de carga de esqueleto usando JavaScript

Ahora que ha agregado el efecto principal con CSS, es hora de desactivarlo con JavaScript. La animación se repetirá un número infinito de veces de forma predeterminada, pero desea que se ejecute solo durante unos segundos. Puede establecer el tiempo en 4000 milisegundos usando setTimeout. Eliminará la clase de esqueleto de todos los elementos después de 4 segundos.

Nota: Asegúrese de agregar justo antes del final de la sección.

esqueletos const = document.querySelectorAll ('. esqueleto')
esqueletos. para cada ((esqueleto) => {
 setTimeout (() => {
esqueleto.classList.remove ('esqueleto')
 }, 4000)
})

Producción:

¿Qué es JavaScript y cómo funciona?

Ha creado con éxito un efecto de carga de pantalla de esqueleto utilizando HTML, CSS y JavaScript. Ahora, siempre que alguien solicite contenido nuevo del servidor, puede mostrar el efecto de carga de la pantalla esqueleto mientras se cargan los datos. Se está convirtiendo en una tendencia de diseño cada vez más popular, como puede verlo en sitios como Google, Facebook y Slack.

Mientras tanto, si es nuevo en JavaScript, puede aprender los conceptos básicos al comprender JavaScript y cómo interactúa con HTML y CSS.

¿Qué es JavaScript y cómo funciona?

Si está aprendiendo sobre desarrollo web, esto es lo que necesita saber sobre JavaScript y cómo funciona con HTML y CSS.

Leer siguiente

Sobre el Autor