Cómo crear una pantalla esqueleto (Skeleton) sin salto de diseño
Aprende a diseñar pantallas esqueleto que mejoran el rendimiento percibido sin causar salto de diseño acumulado (CLS): dimensiones precisas, brillo de onda y accesibilidad.
Idea clave
Una pantalla esqueleto bien construida reproduce las dimensiones exactas de los bloques de texto, imágenes y botones reales antes de que los datos carguen. Esto previene por completo el salto de diseño acumulado (CLS). La animación debe consistir en un brillo suave y continuo de izquierda a derecha usando una máscara de degradado en CSS, y ocultarse a tecnologías de asistencia mediante aria-hidden="true".
Por qué las pantallas esqueleto superan a las ruedas giratorias
Un spinner central en una pantalla en blanco obliga al usuario a esperar a ciegas y hace que la carga parezca más lenta. Los esqueletos visualizan la estructura de la información que está por llegar, reduciendo la ansiedad y el tiempo percibido de espera.
Eliminación del salto de diseño acumulado (CLS)
El mayor error al usar esqueletos es cambiar de tamaño cuando se cargan los datos reales. Configura alturas fijas de línea, radios de borde idénticos y relaciones de aspecto iguales para imágenes y tarjetas.
- Usa la misma altura de línea (line-height) que el texto final
- Reserva espacio para imágenes con aspect-ratio
- Aplica un degradado en bucle con background-position o transform
- Oculta la pantalla esqueleto a lectores de pantalla con aria-hidden="true"
Implementación del brillo (shimmer) en CSS
Crea una animación continua de 1,5 a 2 segundos mediante un degradado lineal que viaje a través de la superficie. Usa tonos neutros de bajo contraste para que la pantalla no parezca parpadear.
Gestión del movimiento reducido
Bajo prefers-reduced-motion, detén la onda de brillo. Muestra los bloques del esqueleto en un tono estático o con una pulsación de opacidad mínima e imperceptible.
Fragmento de implementación en producción
/* CSS Shimmer effect */
.skeleton {
background: linear-gradient(
90deg,
#e5e7eb 25%,
#f3f4f6 50%,
#e5e7eb 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 6px;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.skeleton {
animation: none;
background: #e5e7eb;
}
}Principios clave para recordar
- Empareja exactamente las dimensiones del esqueleto con el contenido final
- Elimina el CLS fijando aspect-ratio y alturas de línea
- Usa brillos continuos de bajo contraste de 1,5 a 2 s
- Detén el brillo animado bajo movimiento reducido
Preguntas frecuentes
Fuentes
- Skeleton Screens and Perceived Performance — Nielsen Norman Group
- Cumulative Layout Shift (CLS) — web.dev