Vale, al lío.
Si estás currando en algo de frontend y quieres darle un toque más molón a tu web o app, los "loaders esqueleto" son la caña.
Vamos, mucho mejor que los típicos spinners que no dicen nada.
Estos loaders hacen que parezca que algo se está cargando ya, y encima quedan bien pro.
Aquí te voy a enseñar a montarte uno fácilmente con HTML y CSS.
Nada de librerías ni historias raras, puro "a pelo".
🔬 El Resultado Final
Antes de darte la chapa, aquí tienes lo que vamos a hacer:
Básicamente, es una tarjeta que parece que se está cargando.
Una imagen, un título y un poco de texto falso.
Pero oye, queda de lujo.
🔎 Por qué molan los Loaders Esqueleto
- Parece más rápido: Al usuario le das algo que ver mientras espera. Mucho mejor que dejarle mirando un spinner aburrido.
- Quedan más currados: Das una idea de lo que está viniendo, así no piensan que tu app se ha roto.
- Son fáciles de hacer: Te lo montas con CSS puro y tirando millas.
✍️ Venga, manos a la obra
Vamos a hacer un loader que imite una tarjeta con una imagen, un título y un poco de texto.
1. HTML Base
Primero monta esta estructura en un archivo HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skeleton Loader</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="card">
<div class="skeleton image"></div>
<div class="skeleton title"></div>
<div class="skeleton text"></div>
</div>
</body>
</html>
2. CSS para el Loader
Ahora crea un archivo styles.css y mete este CSS:
/* Estilos básicos */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.card {
width: 300px;
padding: 20px;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Skeleton loader */
.skeleton {
background-color: #e0e0e0;
border-radius: 4px;
position: relative;
overflow: hidden;
}
.skeleton::before {
content: '';
display: block;
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
animation: shimmer 1.5s infinite;
}
/* Animación del brillo */
@keyframes shimmer {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
/* Variantes del skeleton */
.skeleton.image {
width: 100%;
height: 150px;
margin-bottom: 16px;
}
.skeleton.title {
width: 70%;
height: 20px;
margin-bottom: 12px;
}
.skeleton.text {
width: 100%;
height: 14px;
margin-bottom: 8px;
}
3. Qué hace este CSS
-
Color y bordes: Usamos un gris claro (
#e0e0e0) y bordes redondeados para que parezca algo real. -
Brillo molón: La magia está en el
linear-gradientque se mueve de lado a lado con la animaciónshimmer. - Tamaños realistas: Hacemos que cada parte (imagen, título, texto) tenga proporciones similares a las de un contenido real.
⚖️ Extra: Cargar contenido real
Si quieres que después del loader salga el contenido real, mete este script al final del HTML:
<script>
setTimeout(() => {
document.querySelector('.card').innerHTML = `
<img src="https://via.placeholder.com/300x150" alt="Imagen de ejemplo">
<h3>Título del contenido</h3>
<p>Este es un texto de ejemplo para la tarjeta.</p>
`;
}, 3000); // Simula que tarda 3 segundos en cargar
</script>
Con esto, después de 3 segundos (simulado, claro), el loader desaparece y aparece el contenido real.
📊 Conclusión
Y ya estaría.
Los loaders esqueleto son una manera fácil y elegante de hacer que tu app parezca más rápida y más profesional.
Además, te los montas con cuatro líneas de CSS, así que no hay excusa.
Pruébalo en tus proyectos, y si te mola o tienes alguna duda, cuéntamelo en los comentarios.
¡Nos vemos!
Top comments (0)