DEV Community

Cómo crear un Loader Esqueleto con CSS y mejorar la UX de tu app

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:

Image description

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

3. Qué hace este CSS

  1. Color y bordes: Usamos un gris claro (#e0e0e0) y bordes redondeados para que parezca algo real.
  2. Brillo molón: La magia está en el linear-gradient que se mueve de lado a lado con la animación shimmer.
  3. 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>
Enter fullscreen mode Exit fullscreen mode

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!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay