Skeleton loaders con CSS: animaciones para mejorar la percepción de carga

Posted on 10 junio, 20269 junio, 2026 by marta

Cuando una página web necesita unos segundos para mostrar su contenido, cada instante cuenta. Aunque el tiempo de espera real sea breve, una interfaz completamente vacía puede hacer que el usuario piense que algo no funciona, que la conexión se ha interrumpido o que la aplicación se ha quedado bloqueada.

Los skeleton loaders con CSS ofrecen una solución visual a este problema. En lugar de mostrar una pantalla en blanco o un icono giratorio, presentan una representación simplificada de la estructura que ocupará el contenido definitivo. De este modo, el usuario puede anticipar qué aparecerá y percibe que la aplicación está respondiendo.

Estos elementos también reciben nombres como skeleton screens, loading placeholders o pantallas esqueleto. Su función no es reducir directamente el tiempo de carga, sino mejorar la percepción de velocidad y proporcionar continuidad visual durante la espera.

En este artículo veremos qué es un skeleton loader, cuándo conviene utilizarlo, cómo crearlo únicamente con HTML y CSS y qué aspectos deben tenerse en cuenta para que la animación sea accesible, eficiente y coherente con el diseño de la interfaz.

Si todavía no tienes claros los fundamentos de las animaciones web, puedes comenzar por esta guía básica de animaciones CSS, donde encontrarás una introducción a las transiciones, los fotogramas clave y las propiedades animables.

¿Qué es un skeleton loader?

Un skeleton loader es una interfaz temporal que imita la distribución del contenido que todavía no está disponible. Normalmente está formado por bloques de color neutro que representan imágenes, títulos, párrafos, avatares, botones o tarjetas.

Por ejemplo, mientras una aplicación carga la información de un perfil, puede mostrar:

Un círculo en el lugar donde aparecerá el avatar.
Un rectángulo para representar el nombre.
Varias líneas horizontales simulando una descripción.
Un bloque más grande reservado para una imagen.
Una forma rectangular en el lugar donde aparecerá un botón.

Cuando los datos terminan de cargarse, estos elementos desaparecen y son sustituidos por el contenido real.

La principal diferencia entre un skeleton loader CSS y un indicador de carga tradicional es la cantidad de contexto que ofrecen. Un spinner comunica que existe un proceso en curso, pero no explica qué contenido aparecerá después. El skeleton, en cambio, presenta una estructura aproximada de la interfaz final.

Skeleton loader, spinner y barra de progreso

Aunque estos tres recursos se utilizan para representar estados de carga, no cumplen exactamente la misma función.

Un spinner es adecuado para acciones breves y poco complejas, como enviar un formulario, validar unos datos o guardar una configuración. Resulta sencillo y ocupa poco espacio, pero no informa sobre la estructura que se mostrará después.

Una barra de progreso es útil cuando se conoce el porcentaje de avance de una operación. Por ejemplo, durante la subida de un archivo, la instalación de un recurso o la exportación de un documento.

El skeleton screen CSS es especialmente apropiado cuando se está cargando contenido estructurado, como:

Listados de productos.
Tarjetas de noticias.
Perfiles de usuario.
Resultados de búsqueda.
Publicaciones de una red social.
Paneles de administración.
Tablas con información remota.
Galerías de imágenes.
Comentarios o conversaciones.

La elección debe depender del tipo de espera y del contexto. No se trata de sustituir todos los indicadores de carga por skeletons, sino de utilizar cada patrón donde resulte más comprensible.

En la práctica, una misma aplicación puede combinar diferentes soluciones. Un listado de artículos puede mostrar tarjetas esqueleto mientras se descargan los datos, mientras que el botón para guardar un artículo puede utilizar un pequeño spinner acompañado del texto «Guardando».

Por qué los skeleton loaders mejoran la experiencia de usuario

Un skeleton loader no acelera una petición HTTP ni reduce el tamaño de un archivo JavaScript. Sin embargo, puede conseguir que el proceso de espera resulte menos frustrante.

Esto sucede porque la percepción del tiempo no depende únicamente de los segundos transcurridos. También está relacionada con la información visual que recibe la persona durante ese periodo.

Cuando una interfaz muestra una estructura reconocible, transmite varias señales positivas:

La aplicación ha respondido.
El contenido se está preparando.
La distribución de la página ya está definida.
No es necesario actualizar la pantalla.
El resultado aparecerá en una posición predecible.

Una pantalla vacía obliga al usuario a interpretar qué está sucediendo. Un skeleton loader reduce esa incertidumbre al ofrecer una respuesta visual inmediata.

Reducción de los saltos de contenido

Uno de los problemas habituales en las interfaces dinámicas es que los elementos cambien de posición a medida que se descargan imágenes, textos o componentes.

Estos movimientos pueden generar una experiencia incómoda. El usuario puede estar a punto de pulsar un botón y, justo antes de hacerlo, el contenido se desplaza porque aparece una imagen que todavía no tenía espacio reservado.

Un skeleton loader puede ayudar a evitar este comportamiento cuando se diseña con unas dimensiones similares a las del elemento definitivo.

Por ejemplo, si una tarjeta va a contener una imagen con una relación de aspecto de 16:9, el bloque provisional debería reservar esa misma proporción:

.skeleton-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0.75rem;
}

La propiedad aspect-ratio permite mantener el espacio necesario antes de que llegue la imagen real. Esto favorece una interfaz más estable y predecible.

No obstante, el skeleton solo ayudará a reducir los desplazamientos si su estructura se corresponde con el contenido final. Si el placeholder tiene una altura de 200 píxeles y la imagen definitiva ocupa 400, el salto visual seguirá produciéndose.

Sensación de progreso

Una pantalla vacía transmite inactividad. Una animación de carga CSS suave, en cambio, comunica que el sistema continúa trabajando.

El usuario no sabe necesariamente cuánto falta para que aparezcan los datos, pero observa una respuesta visual inmediata. Esa sensación de progreso puede ser suficiente para evitar que cierre la página o repita una acción innecesariamente.

Aun así, un skeleton loader no debe utilizarse para ocultar problemas graves de rendimiento. Si una pantalla tarda demasiado en cargar, será necesario revisar las peticiones, el tamaño de los recursos, el procesamiento de datos y la arquitectura de la aplicación.

La animación mejora la espera, pero no sustituye una estrategia real de optimización.

Cómo crear un skeleton loader básico con CSS

Un skeleton loader sencillo puede construirse con un elemento HTML y unas pocas propiedades CSS.

Partimos de una tarjeta que representa una noticia o un artículo:

<article class="skeleton-card" aria-hidden="true">
  <div class="skeleton skeleton-card__image"></div>

  <div class="skeleton-card__content">
    <div class="skeleton skeleton-card__title"></div>
    <div class="skeleton skeleton-card__text"></div>
    <div class="skeleton skeleton-card__text skeleton-card__text--short"></div>
  </div>
</article>

La clase .skeleton contiene los estilos compartidos por todos los bloques:

.skeleton {
  background-color: #e5e7eb;
  border-radius: 0.5rem;
}

Después definimos las dimensiones de cada elemento:

.skeleton-card {
  width: min(100%, 22rem);
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  background-color: #ffffff;
}

.skeleton-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0;
}

.skeleton-card__content {
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem;
}

.skeleton-card__title {
  width: 70%;
  height: 1.5rem;
}

.skeleton-card__text {
  width: 100%;
  height: 0.875rem;
}

.skeleton-card__text--short {
  width: 60%;
}

Con este código obtenemos una representación estática de la tarjeta. El usuario puede identificar dónde aparecerán la imagen, el título y la descripción, incluso antes de que los datos estén disponibles.

Sin embargo, todavía podemos mejorar el componente incorporando una animación que transmita actividad.

Crear el efecto de pulso

La opción más sencilla consiste en modificar progresivamente la opacidad de los bloques:

.skeleton {
  background-color: #e5e7eb;
  border-radius: 0.5rem;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.55;
  }
}

Este efecto funciona bien en interfaces minimalistas y requiere muy poco código. La animación es discreta y no distrae demasiado del resto de la página.

No obstante, conviene no reducir excesivamente la opacidad. El bloque debe seguir siendo visible durante toda la animación para conservar su función estructural.

Si necesitas profundizar en la sintaxis y el funcionamiento de los fotogramas clave, puedes consultar el artículo sobre cómo funciona @keyframes en CSS.

Crear un efecto shimmer con gradiente

Otro patrón muy utilizado es el efecto shimmer. Consiste en desplazar una franja luminosa sobre el bloque para simular que el contenido se está preparando.

.skeleton {
  position: relative;
  overflow: hidden;
  background-color: #e5e7eb;
  border-radius: 0.5rem;
}

.skeleton::after {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    90deg,
    transparent,
    rgb(255 255 255 / 55%),
    transparent
  );
  content: "";
  transform: translateX(-100%);
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

El pseudoelemento ::after ocupa toda la superficie del bloque. El gradiente comienza fuera del componente y se desplaza horizontalmente mediante transform.

Esta solución evita añadir un elemento HTML adicional únicamente para crear el brillo. El contenido semántico permanece más limpio y el efecto decorativo queda completamente controlado desde CSS.

Además, animar transform suele ser una opción más adecuada que modificar continuamente propiedades relacionadas con el tamaño o la posición del documento. Puedes ampliar esta idea en el artículo sobre por qué conviene animar transform y opacity antes que width o height.

Personalizar el skeleton con variables CSS

Cuando existen varios skeleton loaders en una aplicación, conviene centralizar sus estilos mediante propiedades personalizadas:

:root {
  --skeleton-background: #e5e7eb;
  --skeleton-highlight: rgb(255 255 255 / 60%);
  --skeleton-radius: 0.5rem;
  --skeleton-duration: 1.6s;
}

.skeleton {
  position: relative;
  overflow: hidden;
  background-color: var(--skeleton-background);
  border-radius: var(--skeleton-radius);
}

.skeleton::after {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    90deg,
    transparent,
    var(--skeleton-highlight),
    transparent
  );
  content: "";
  transform: translateX(-100%);
  animation: skeleton-shimmer var(--skeleton-duration) ease-in-out infinite;
}

De esta manera, resulta más sencillo adaptar el componente a la identidad visual del proyecto o modificar globalmente la velocidad, el color y el radio de los bloques.

También permite mantener una apariencia coherente cuando el loading placeholder se utiliza en diferentes secciones de la aplicación.

Cómo construir skeleton loaders reutilizables

En una aplicación real probablemente necesitaremos algo más que una única tarjeta. Por ese motivo, es recomendable pensar en el skeleton como un pequeño sistema de componentes.

Podemos crear variantes para textos, imágenes y avatares:

.skeleton--text {
  width: 100%;
  height: 0.875rem;
}

.skeleton--heading {
  width: 65%;
  height: 1.75rem;
}

.skeleton--avatar {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: 50%;
}

.skeleton--thumbnail {
  width: 7rem;
  aspect-ratio: 1;
}

Después podemos combinar estas piezas en diferentes estructuras sin repetir todos los estilos:

<div class="profile-skeleton" aria-hidden="true">
  <div class="skeleton skeleton--avatar"></div>

  <div class="profile-skeleton__content">
    <div class="skeleton skeleton--heading"></div>
    <div class="skeleton skeleton--text"></div>
    <div class="skeleton skeleton--text profile-skeleton__short-line"></div>
  </div>
</div>

.profile-skeleton {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.profile-skeleton__content {
  display: grid;
  flex: 1;
  gap: 0.625rem;
}

.profile-skeleton__short-line {
  width: 45%;
}

Este enfoque permite mantener una base común mientras se crean composiciones diferentes para perfiles, artículos, productos o comentarios.

Skeleton para una lista de elementos

Si una pantalla debe mostrar varias tarjetas, podemos repetir el mismo patrón:

<section class="skeleton-list" aria-label="Cargando artículos">
  <article class="skeleton-card" aria-hidden="true">
    <!-- Bloques del skeleton -->
  </article>

  <article class="skeleton-card" aria-hidden="true">
    <!-- Bloques del skeleton -->
  </article>

  <article class="skeleton-card" aria-hidden="true">
    <!-- Bloques del skeleton -->
  </article>
</section>

.skeleton-list {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 18rem), 1fr)
  );
  gap: 1.5rem;
}

El uso de auto-fit y minmax() permite que el listado se adapte a diferentes tamaños de pantalla sin depender de un gran número de media queries.

Evitar que todos los bloques parezcan idénticos

Si todas las líneas de texto tienen exactamente la misma longitud, el skeleton puede resultar demasiado artificial. Una ligera variación ayuda a representar el contenido real de manera más creíble:

.skeleton-line:nth-child(2) {
  width: 92%;
}

.skeleton-line:nth-child(3) {
  width: 78%;
}

.skeleton-line:nth-child(4) {
  width: 55%;
}

La variación debe ser moderada. El objetivo no es reproducir el contenido definitivo con exactitud, sino ofrecer una aproximación visual de su jerarquía y distribución.

También conviene evitar generar anchuras completamente aleatorias en cada renderizado. Si el skeleton cambia de forma cada vez que aparece, la interfaz puede transmitir falta de consistencia.

Accesibilidad en los skeleton loaders

Una animación de carga CSS no debería evaluarse únicamente por su apariencia. También debe funcionar correctamente para personas que utilizan lectores de pantalla o que presentan sensibilidad al movimiento.

Los bloques decorativos del skeleton no contienen información útil. Por tanto, no deberían anunciarse uno por uno mediante tecnologías de asistencia.

Podemos ocultarlos con aria-hidden="true":

<div class="skeleton-card" aria-hidden="true">
  <!-- Elementos visuales -->
</div>

Al mismo tiempo, el contenedor que está esperando los datos puede indicar que se encuentra ocupado:

<section class="articles" aria-busy="true">
  <div class="skeleton-card" aria-hidden="true">
    <!-- Skeleton -->
  </div>
</section>

Cuando el contenido real esté disponible, el atributo deberá cambiar a:

<section class="articles" aria-busy="false">
  <!-- Contenido definitivo -->
</section>

Comunicar el estado sin describir cada bloque

En determinadas interfaces puede ser conveniente incluir un mensaje accesible que indique que los datos se están cargando:

<p class="sr-only" role="status">
  Cargando artículos, por favor espera.
</p>

La clase .sr-only mantiene el texto disponible para lectores de pantalla, aunque no aparezca visualmente:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

No es necesario anunciar cada elemento del skeleton. Un único mensaje general suele ser suficiente para informar del estado de la interfaz.

Cuando la carga termine, el mensaje puede actualizarse o retirarse. Si se produce un error, deberá sustituirse por una explicación clara de lo ocurrido.

Respetar `prefers-reduced-motion`

Las personas que han configurado su sistema para reducir el movimiento deberían poder utilizar la página sin animaciones continuas innecesarias.

Podemos desactivar el efecto mediante la consulta prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  .skeleton,
  .skeleton::after {
    animation: none;
  }
}

El skeleton seguirá cumpliendo su función como placeholder estático, pero dejará de desplazarse o cambiar de opacidad.

Esta adaptación es especialmente importante cuando existen muchos elementos animados al mismo tiempo. Una cuadrícula con diez o veinte skeletons puede generar un movimiento constante que resulte incómodo para algunos usuarios.

En la guía sobre animaciones CSS accesibles y prefers-reduced-motion encontrarás una explicación más detallada sobre cómo detectar y respetar esta preferencia.

Rendimiento de las animaciones de carga

Aunque el skeleton aparece precisamente durante una espera, eso no significa que su rendimiento sea irrelevante. Una animación poco optimizada puede consumir recursos, provocar tirones o competir con otras tareas que el navegador está ejecutando.

Para crear una animación eficiente conviene:

Priorizar transform y opacity.
Evitar animar dimensiones como width o height.
No crear un número excesivo de elementos.
Utilizar pseudoelementos cuando sea posible.
Detener la animación cuando el componente desaparezca.
Evitar sombras y filtros demasiado complejos.
No animar elementos que permanecen fuera del área visible.

El efecto shimmer mostrado anteriormente utiliza transform: translateX(), una elección adecuada para desplazar la franja luminosa.

Si quieres profundizar en este tema, puedes consultar el artículo sobre animaciones CSS y rendimiento, donde se explica qué propiedades resultan más apropiadas y cuáles pueden provocar recálculos de diseño innecesarios.

Utilizar `will-change` con moderación

También debemos evitar aplicar will-change indiscriminadamente. Esta propiedad permite avisar al navegador de que un elemento va a cambiar, pero mantenerla en decenas de componentes puede aumentar el consumo de memoria.

En la mayoría de skeleton loaders sencillos no es necesario utilizarla. Si las pruebas de rendimiento demuestran que aporta una mejora, podría aplicarse al pseudoelemento animado:

.skeleton::after {
  will-change: transform;
}

No debe añadirse como una optimización automática. Antes de incorporarla, conviene comprobar el comportamiento real mediante las herramientas de desarrollo del navegador.

¿Cuántos skeletons deberían mostrarse?

No existe un número universal. Dependerá del diseño y de la cantidad de contenido visible inicialmente.

Como referencia, suele ser suficiente representar los elementos que cabrían en la primera pantalla. Mostrar veinte tarjetas animadas cuando el usuario solo puede ver tres aumenta el trabajo del navegador sin aportar información adicional.

También puede utilizarse un skeleton simplificado para el contenido que queda fuera de la vista o retrasar su renderizado hasta que se aproxime al viewport.

El objetivo es representar la espera, no duplicar toda la página con elementos provisionales.

Errores frecuentes al diseñar skeleton screens

Un skeleton loader puede empeorar la experiencia si no guarda relación con la interfaz real o si permanece demasiado tiempo en pantalla.

Utilizar una estructura diferente al contenido final

El error más evidente consiste en mostrar un skeleton con unas dimensiones que no coinciden con el componente definitivo.

Si el placeholder presenta una imagen cuadrada, pero el contenido final utiliza una imagen horizontal, la tarjeta cambiará de forma al completarse la carga. En ese caso, el skeleton no evita los saltos visuales, sino que los provoca.

La estructura provisional debería aproximarse a:

La altura del contenido.
La proporción de las imágenes.
El número de líneas de texto.
La posición de botones y avatares.
Los márgenes y espacios internos.
La jerarquía visual del componente.

No es necesario que la copia sea exacta, pero sí que conserve la distribución principal.

Mantener el skeleton aunque la carga haya fallado

El skeleton representa un estado temporal. Si la petición produce un error, la interfaz debe sustituirlo por un mensaje claro y una posible acción de recuperación.

Mantener la animación indefinidamente hace creer que el contenido continúa cargándose cuando, en realidad, el proceso ha fallado.

Un componente debería contemplar al menos tres estados:

Cargando.
Contenido disponible.
Error de carga.

En algunos casos también será necesario representar un estado vacío, cuando la petición funciona correctamente pero no devuelve resultados.

Usar animaciones demasiado rápidas

Un shimmer muy veloz puede resultar agresivo y llamar más la atención que el contenido principal. Por el contrario, una animación excesivamente lenta puede parecer bloqueada.

Una duración situada aproximadamente entre 1.4s y 2s suele producir un efecto suave, aunque debe ajustarse según el tamaño del componente y la distancia recorrida:

.skeleton::after {
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

La animación debe acompañar la espera sin convertirse en el elemento protagonista.

Mostrar skeletons para cargas casi instantáneas

Si el contenido aparece en unas pocas décimas de segundo, el skeleton puede producir un destello molesto. El usuario verá brevemente una estructura gris que desaparece casi de inmediato.

Para evitarlo, algunas aplicaciones retrasan ligeramente la aparición del placeholder. Si los datos llegan antes de ese umbral, el skeleton nunca se muestra.

Esta lógica no puede resolverse únicamente con CSS, porque depende del estado y de la duración de la petición. Debe controlarse desde JavaScript o desde el framework utilizado.

Utilizar skeletons sin una necesidad real

No todas las esperas requieren una pantalla esqueleto. Añadirla de forma automática a cualquier interacción puede complicar el código y sobrecargar visualmente la interfaz.

Antes de implementarla, conviene valorar si realmente ayuda al usuario. El artículo sobre cuándo utilizar animaciones CSS y cuándo evitarlas puede ayudarte a tomar esta decisión con mayor criterio.

Cuándo conviene utilizar un skeleton loader

Los skeleton loaders funcionan especialmente bien cuando la estructura del contenido se conoce antes de recibir los datos.

Son una buena opción para:

Tarjetas de artículos o productos.
Cabeceras de perfiles.
Conversaciones y mensajes.
Tablas y paneles.
Feeds de contenido.
Resultados paginados.
Componentes cargados de forma diferida.
Galerías de imágenes.
Paneles con estadísticas.
Secciones personalizadas para usuarios registrados.

En cambio, pueden no ser la mejor solución cuando:

La operación es prácticamente instantánea.
No se conoce la estructura del resultado.
Se dispone de un porcentaje de progreso real.
El usuario debe esperar a que termine una acción concreta.
La pantalla contiene una única operación pequeña.
El placeholder provocaría más movimiento que la propia carga.

Un botón que está enviando un formulario no necesita transformarse en una pantalla esqueleto. En ese contexto, un texto como «Enviando…» acompañado de un indicador pequeño será más comprensible.

También puedes consultar la guía sobre cómo crear loaders animados solo con CSS para conocer otras alternativas visuales y elegir el indicador más adecuado para cada situación.

Cómo integrar el skeleton loader con JavaScript

CSS se ocupa de la apariencia, pero normalmente JavaScript controla cuándo debe mostrarse el placeholder.

Un ejemplo sencillo podría ser:

<section id="articles" aria-busy="true">
  <p class="sr-only" role="status">
    Cargando artículos.
  </p>

  <div id="articles-skeleton" class="skeleton-list">
    <!-- Skeletons -->
  </div>

  <div id="articles-content" hidden></div>
</section>

const section = document.querySelector("#articles");
const skeleton = document.querySelector("#articles-skeleton");
const content = document.querySelector("#articles-content");

async function loadArticles() {
  try {
    const response = await fetch("/api/articles");

    if (!response.ok) {
      throw new Error("No se han podido cargar los artículos");
    }

    const articles = await response.json();

    content.innerHTML = articles
      .map(
        (article) => `
          <article>
            <h2>${article.title}</h2>
            <p>${article.description}</p>
          </article>
        `
      )
      .join("");

    skeleton.remove();
    content.hidden = false;
    section.setAttribute("aria-busy", "false");
  } catch (error) {
    skeleton.remove();
    content.hidden = false;
    content.textContent = error.message;
    section.setAttribute("aria-busy", "false");
  }
}

loadArticles();

En una aplicación desarrollada con React, Vue, Angular o cualquier otro framework, el principio será el mismo: renderizar el skeleton durante el estado de carga y sustituirlo cuando los datos estén disponibles.

La clave está en evitar que el contenido real y el placeholder aparezcan simultáneamente o que el skeleton continúe animándose después de haber sido ocultado.

Evitar la inyección directa de contenido no confiable

El ejemplo anterior utiliza innerHTML para mantener el código breve. En una aplicación real, no deberías insertar directamente datos externos sin haberlos validado o escapado.

Cuando el contenido procede de una API que no controlas por completo, utiliza métodos seguros para crear los elementos o las herramientas de renderizado proporcionadas por tu framework.

El skeleton loader se ocupa del estado visual de carga, pero no elimina la necesidad de aplicar buenas prácticas de seguridad.

Buenas prácticas para un loading placeholder CSS efectivo

Un buen skeleton loader debería ser discreto, representativo y temporal. Para conseguirlo, podemos seguir estas recomendaciones:

Mantener una estructura similar al contenido real.
Utilizar colores neutros compatibles con el tema visual.
Reservar las proporciones de imágenes y bloques.
Evitar animaciones excesivamente llamativas.
Respetar la preferencia de movimiento reducido.
Ocultar los elementos decorativos a lectores de pantalla.
Comunicar correctamente el estado de carga.
Contemplar errores y estados vacíos.
Reducir los placeholders situados fuera del área visible.
Sustituir el skeleton tan pronto como los datos estén preparados.
Comprobar el contraste en temas claros y oscuros.
Probar el resultado en dispositivos con menos recursos.

También conviene adaptar los colores al modo oscuro. Un gris pensado para un fondo blanco puede generar demasiado contraste dentro de una interfaz oscura:

@media (prefers-color-scheme: dark) {
  :root {
    --skeleton-background: #2d3340;
    --skeleton-highlight: rgb(255 255 255 / 8%);
  }
}

En proyectos con un selector de tema propio, será preferible vincular las variables a una clase o atributo:

[data-theme="dark"] {
  --skeleton-background: #2d3340;
  --skeleton-highlight: rgb(255 255 255 / 8%);
}

Esta solución permite que el skeleton responda al tema seleccionado dentro de la aplicación, independientemente de la configuración general del sistema operativo.

Preguntas frecuentes sobre skeleton loaders con CSS

¿Un skeleton loader mejora la velocidad real de una página?

No. Un skeleton loader no reduce por sí mismo el tiempo necesario para descargar datos, ejecutar JavaScript o renderizar imágenes. Su función consiste en mejorar la percepción de carga y proporcionar información visual durante la espera.

Para mejorar la velocidad real deben aplicarse otras medidas, como optimizar imágenes, reducir dependencias, utilizar caché, dividir el código, mejorar las consultas o disminuir el tiempo de respuesta del servidor.

¿Es mejor utilizar un skeleton loader o un spinner?

Depende del contexto. Un skeleton loader suele funcionar mejor cuando se está cargando contenido estructurado cuya distribución ya conocemos. Un spinner resulta más adecuado para operaciones breves, acciones sobre botones o procesos donde no es posible anticipar el resultado visual.

Ambos patrones pueden convivir dentro de la misma aplicación si se utilizan de forma coherente.

¿Se puede crear un skeleton screen únicamente con CSS?

Sí. La estructura visual y la animación pueden crearse con HTML y CSS mediante bloques, gradientes, pseudoelementos y @keyframes.

Sin embargo, para decidir cuándo aparece o desaparece el skeleton normalmente será necesario utilizar JavaScript, un framework frontend o algún sistema de renderizado que gestione el estado de la petición.

Diseñar la espera también forma parte de la experiencia

La carga no es un momento ajeno al diseño de una interfaz. Desde que el usuario solicita un contenido hasta que puede interactuar con él, cada estado forma parte de la experiencia.

Los skeleton loaders con CSS permiten transformar una pantalla vacía en una estructura comprensible. Bien utilizados, anticipan el contenido, reducen los cambios visuales y transmiten que el sistema continúa respondiendo.

Sin embargo, su valor no depende únicamente de añadir un gradiente animado. Un skeleton efectivo debe respetar la forma del contenido real, ser accesible, consumir pocos recursos y desaparecer correctamente tanto cuando la petición termina como cuando se produce un error.

La mejor animación de carga no es la más llamativa, sino la que acompaña la espera sin convertirse en protagonista. Cuando el usuario apenas repara en ella y encuentra el contenido exactamente donde esperaba, el skeleton loader está cumpliendo su función.

Cómo crear loaders animados solo con CSS

Posted on 9 junio, 202612 junio, 2026 by marta

Cuando una página necesita unos segundos para cargar datos, procesar una acción o completar una petición, el usuario debe recibir alguna señal que confirme que el sistema continúa funcionando. De lo contrario, puede pensar que la interfaz se ha bloqueado, pulsar varias veces el mismo botón o abandonar el sitio antes de que termine el proceso.

Los loaders cumplen precisamente esa función. Son pequeños indicadores visuales que comunican que existe una tarea en curso y que es necesario esperar. Aunque pueden desarrollarse mediante imágenes, SVG o JavaScript, en muchos casos es posible crear un loader CSS animado utilizando únicamente HTML y CSS.

Un círculo giratorio, una secuencia de puntos, unas barras que cambian de tamaño o una línea de progreso indeterminada pueden construirse con unas pocas propiedades, pseudoelementos y una regla @keyframes.

En esta guía veremos cómo crear diferentes loaders animados solo con CSS, cómo personalizarlos y qué medidas debemos aplicar para que sean accesibles, eficientes y coherentes con el diseño de la interfaz.

Si todavía no tienes claros los fundamentos de las transiciones y las animaciones, puedes consultar primero esta guía básica de animaciones CSS, donde se explican conceptos como transition, animation y @keyframes desde cero.

Qué es un loader CSS y para qué sirve

Un loader es un componente visual que informa de que una aplicación está realizando una operación cuyo resultado todavía no está disponible.

Puede aparecer mientras:

se recuperan datos de una API;
se envía un formulario;
se procesa un pago;
se sube un archivo;
se carga una nueva página;
se generan resultados;
se prepara una imagen;
se actualiza una sección dinámica.

El loader no acelera técnicamente la operación. Su función consiste en hacer comprensible el tiempo de espera.

Cuando el usuario recibe una respuesta visual inmediata, entiende que su acción ha sido registrada. Aunque el proceso tarde exactamente lo mismo, la experiencia resulta más clara y controlada.

Diferencias entre loader, spinner y barra de progreso

Los términos loader y spinner se utilizan a menudo como si fueran sinónimos, pero no significan exactamente lo mismo.

Un loader es cualquier indicador de carga. Puede tener forma circular, lineal, geométrica o incluso representar una pequeña ilustración.

Un spinner CSS es un tipo específico de loader basado en un movimiento giratorio. El ejemplo más habitual es un círculo con una parte del borde destacada que gira de manera continua.

Por otra parte, una barra de progreso puede ser determinada o indeterminada:

Una barra determinada muestra cuánto falta para completar el proceso, normalmente mediante un porcentaje.
Una barra indeterminada comunica que existe una operación en curso, pero no representa su duración ni su progreso exacto.

Cuando no conocemos el avance real de una tarea, no debemos mostrar un porcentaje inventado. En esos casos, resulta más apropiado utilizar un spinner, una animación de puntos o una barra indeterminada.

Qué significa crear un loader solo con CSS

Crear un loader solo con CSS significa que su representación visual y su movimiento no necesitan imágenes externas, GIF animados ni lógica JavaScript.

La animación puede construirse mediante:

bordes;
fondos;
transformaciones;
cambios de opacidad;
pseudoelementos;
retrasos de animación;
reglas @keyframes.

No obstante, conviene aclarar una cuestión importante: CSS puede animar el loader, pero normalmente no decide cuándo debe aparecer o desaparecer.

En una aplicación real, JavaScript, React, Vue, Angular o la tecnología utilizada en el proyecto controlará el estado de carga. CSS se encargará de la apariencia, mientras que la lógica de la aplicación determinará cuándo mostrar u ocultar el componente.

Fundamentos de una animación de carga CSS

Antes de construir los ejemplos, resulta útil conocer las piezas básicas que intervienen en cualquier animación de carga.

La estructura HTML del loader

Un loader sencillo puede partir de un único elemento:

<div class="spinner"></div>

Esta estructura puede ser suficiente para representar la parte visual, pero no comunica qué está ocurriendo a los usuarios de tecnologías de asistencia.

Una versión más completa sería la siguiente:

<div class="loader" role="status">
  <span class="loader__spinner" aria-hidden="true"></span>
  <span class="loader__text">Cargando contenido…</span>
</div>

En este ejemplo:

role="status" identifica el contenido como una actualización de estado;
aria-hidden="true" oculta el elemento decorativo a los lectores de pantalla;
el texto explica qué operación se está realizando.

Esta separación entre contenido y decoración permite cambiar el aspecto del loader sin perder información esencial.

Cómo funciona `@keyframes`

La regla @keyframes define los distintos estados que atravesará un elemento durante una animación.

Un giro completo puede declararse así:

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

El valor 1turn equivale a una vuelta completa. También podríamos utilizar 360deg, aunque 1turn expresa de forma muy clara la intención del movimiento.

Después debemos asociar la animación al elemento:

.loader__spinner {
  animation: spin 0.8s linear infinite;
}

La propiedad abreviada animation indica:

spin: nombre de la animación;
0.8s: duración de cada ciclo;
linear: velocidad constante;
infinite: repetición indefinida.

Propiedades principales de `animation`

Aunque la sintaxis abreviada es cómoda, una animación está formada por diferentes propiedades:

.elemento {
  animation-name: spin;
  animation-duration: 0.8s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
}

Para un loading CSS no siempre necesitaremos configurarlas todas. Las más habituales serán el nombre, la duración, la curva de velocidad, el retraso y el número de repeticiones.

Cómo crear un spinner CSS circular

El círculo giratorio es probablemente el tipo de loader más reconocible. Puede construirse aplicando un borde uniforme a un elemento circular y cambiando el color de uno de sus lados.

HTML del spinner

<div class="loader" role="status">
  <span class="spinner" aria-hidden="true"></span>
  <span>Cargando contenido…</span>
</div>

CSS del spinner

.loader {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: sans-serif;
  color: #2d2433;
}

.spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 0.3rem solid #eadde7;
  border-top-color: #cc2b5e;
  border-radius: 50%;
  animation: spinner-rotation 0.8s linear infinite;
}

@keyframes spinner-rotation {
  to {
    transform: rotate(1turn);
  }
}

La clave está en border-top-color. Como uno de los lados tiene un color diferente, el giro produce la sensación de que una sección del círculo está avanzando continuamente.

La propiedad border-radius: 50% transforma el elemento cuadrado en un círculo, mientras que transform: rotate() genera el movimiento.

Este ejemplo demuestra que no necesitamos una imagen para crear una forma reconocible. Si te interesa profundizar en este enfoque, en el artículo sobre cómo dibujar formas básicas con CSS encontrarás más ejemplos de círculos, triángulos, óvalos y otras figuras construidas únicamente con estilos.

Personalizar el spinner mediante variables CSS

Cuando un loader se utiliza en diferentes secciones, es recomendable definir sus principales características mediante propiedades personalizadas.

.spinner {
  --loader-size: 2.5rem;
  --loader-width: 0.3rem;
  --loader-color: #cc2b5e;
  --loader-track: #eadde7;
  --loader-speed: 0.8s;

  width: var(--loader-size);
  height: var(--loader-size);
  border: var(--loader-width) solid var(--loader-track);
  border-top-color: var(--loader-color);
  border-radius: 50%;
  animation: spinner-rotation var(--loader-speed) linear infinite;
}

Ahora podemos crear variantes modificando únicamente las variables:

.spinner--small {
  --loader-size: 1.25rem;
  --loader-width: 0.2rem;
}

.spinner--large {
  --loader-size: 4rem;
  --loader-width: 0.45rem;
  --loader-speed: 1.1s;
}

.spinner--secondary {
  --loader-color: #753a88;
}

Este sistema facilita la reutilización del componente y reduce la duplicación de estilos.

También permite adaptar el spinner a distintos contextos, como un botón pequeño, una pantalla completa o una tarjeta que actualiza su contenido.

Cómo crear un loader de puntos animados

Los puntos secuenciales funcionan especialmente bien en botones, mensajes, chats o espacios reducidos donde un spinner circular podría ocupar demasiado espacio.

Estructura HTML

<div class="loader-dots" role="status">
  <span class="loader-dots__animation" aria-hidden="true">
    <span></span>
    <span></span>
    <span></span>
  </span>

  <span class="visually-hidden">Cargando resultados…</span>
</div>

La animación se marca como decorativa y el texto permanece disponible para los lectores de pantalla.

Estilos de los puntos

.loader-dots__animation {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.loader-dots__animation span {
  width: 0.65rem;
  height: 0.65rem;
  background-color: #cc2b5e;
  border-radius: 50%;
  animation: dot-pulse 1.2s ease-in-out infinite;
}

.loader-dots__animation span:nth-child(2) {
  animation-delay: 0.15s;
}

.loader-dots__animation span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes dot-pulse {
  0%,
  80%,
  100% {
    transform: scale(0.65);
    opacity: 0.4;
  }

  40% {
    transform: scale(1);
    opacity: 1;
  }
}

Cada punto utiliza la misma animación, pero comienza en un momento diferente gracias a animation-delay.

Este pequeño desfase crea una secuencia continua sin necesidad de definir tres animaciones distintas.

Ocultar el texto solo visualmente

Cuando no queremos mostrar el mensaje junto al loader, podemos ocultarlo visualmente sin eliminarlo del árbol de accesibilidad:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
}

No deberíamos utilizar display: none para este texto, ya que dejaría de estar disponible para las tecnologías de asistencia.

Cómo crear un loader de barras con CSS

Otra alternativa consiste en animar varias barras verticales. Este patrón puede recordar a un ecualizador y resulta adecuado para interfaces relacionadas con audio, procesamiento o análisis de datos.

HTML del loader

<div class="loader-bars" role="status">
  <span class="loader-bars__animation" aria-hidden="true">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </span>

  <span class="visually-hidden">Procesando información…</span>
</div>

CSS de las barras animadas

.loader-bars__animation {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 2rem;
}

.loader-bars__animation span {
  width: 0.35rem;
  height: 100%;
  background-color: #753a88;
  border-radius: 999px;
  transform-origin: center;
  animation: bar-scale 1s ease-in-out infinite;
}

.loader-bars__animation span:nth-child(2) {
  animation-delay: 0.1s;
}

.loader-bars__animation span:nth-child(3) {
  animation-delay: 0.2s;
}

.loader-bars__animation span:nth-child(4) {
  animation-delay: 0.3s;
}

@keyframes bar-scale {
  0%,
  100% {
    transform: scaleY(0.35);
    opacity: 0.5;
  }

  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

En lugar de modificar directamente la altura de las barras, utilizamos transform: scaleY().

Visualmente, el resultado es similar a cambiar height, pero mantenemos intacto el espacio que ocupa cada elemento dentro del documento.

Cómo crear una barra de carga indeterminada

Cuando el loader debe ocupar un espacio horizontal, podemos crear una línea que se desplace dentro de un contenedor.

Este patrón es apropiado cuando queremos comunicar actividad sin representar un porcentaje exacto.

Marcado HTML

<div class="loading-section" role="status">
  <div class="loading-bar" aria-hidden="true"></div>
  <p>Cargando los datos solicitados…</p>
</div>

Estilos CSS

.loading-section {
  width: min(100%, 24rem);
  font-family: sans-serif;
  color: #2d2433;
}

.loading-bar {
  position: relative;
  width: 100%;
  height: 0.5rem;
  overflow: hidden;
  background-color: #eadde7;
  border-radius: 999px;
}

.loading-bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background-color: #cc2b5e;
  border-radius: inherit;
  transform: translateX(-125%);
  animation: loading-progress 1.4s ease-in-out infinite;
}

@keyframes loading-progress {
  to {
    transform: translateX(350%);
  }
}

El contenedor oculta todo lo que sobresale mediante overflow: hidden. El pseudoelemento comienza fuera del extremo izquierdo y atraviesa la barra utilizando translateX().

Este loader comunica que una tarea está activa, pero no muestra un avance real. Por ese motivo, no debemos presentarlo como si fuera una barra de progreso determinada.

Crear un loader con pseudoelementos

Los pseudoelementos ::before y ::after permiten generar formas adicionales sin incorporar más etiquetas al HTML.

Podemos utilizarlos para crear un loader con dos anillos que giren en direcciones distintas:

<div class="double-spinner" role="status">
  <span class="visually-hidden">Cargando aplicación…</span>
</div>

.double-spinner {
  position: relative;
  width: 3.5rem;
  height: 3.5rem;
}

.double-spinner::before,
.double-spinner::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.double-spinner::before {
  inset: 0;
  border: 0.3rem solid transparent;
  border-top-color: #cc2b5e;
  border-right-color: #cc2b5e;
  animation: outer-rotation 1s linear infinite;
}

.double-spinner::after {
  inset: 0.65rem;
  border: 0.25rem solid transparent;
  border-bottom-color: #753a88;
  animation: inner-rotation 0.75s linear infinite reverse;
}

@keyframes outer-rotation {
  to {
    transform: rotate(1turn);
  }
}

@keyframes inner-rotation {
  to {
    transform: rotate(1turn);
  }
}

Aunque el diseño utiliza dos formas, el HTML solo necesita un contenedor. Los pseudoelementos se reservan para la parte puramente decorativa.

Este mismo recurso puede emplearse para construir otros elementos de interfaz. En la guía sobre cómo dibujar iconos sencillos con CSS sin utilizar SVG ni imágenes puedes ver cómo combinar bordes, transformaciones y pseudoelementos para crear gráficos ligeros.

Accesibilidad en los loaders animados

Un loader no debería ser únicamente un elemento que se mueve. Si el estado de carga solo se comunica visualmente, algunas personas no sabrán que la interfaz está procesando información.

Añadir un mensaje de estado

La solución más clara consiste en acompañar el loader con un texto:

<div class="loader" role="status">
  <span class="spinner" aria-hidden="true"></span>
  <span>Cargando productos…</span>
</div>

El mensaje debería describir la acción cuando resulte útil:

“Cargando productos…”
“Enviando formulario…”
“Procesando el pago…”
“Preparando el archivo…”
“Actualizando resultados…”

Un mensaje específico suele resultar más informativo que un “Cargando…” genérico.

Utilizar `role="status"`

El rol status identifica una actualización que puede anunciarse sin desplazar el foco del usuario.

El elemento visual puede llevar aria-hidden="true" para evitar información innecesaria:

<span class="spinner" aria-hidden="true"></span>

No es necesario describir que existe un círculo de color girando. Lo importante es comunicar que la operación continúa.

Indicar que una región está ocupada

Cuando una sección concreta se está actualizando, puede utilizarse aria-busy="true" en el contenedor correspondiente:

<section class="results" aria-busy="true">
  <div class="loader" role="status">
    <span class="spinner" aria-hidden="true"></span>
    <span>Cargando resultados…</span>
  </div>
</section>

Cuando termina la operación, la aplicación debe actualizar el atributo:

<section class="results" aria-busy="false">
  <!-- Contenido cargado -->
</section>

Este cambio normalmente requerirá JavaScript o la lógica del framework utilizado.

La accesibilidad no debe añadirse al final como una corrección aislada. Conviene plantearla desde el momento en el que diseñamos el componente. En el artículo sobre componentes UI accesibles encontrarás más recomendaciones para crear interfaces comprensibles mediante HTML semántico, estados visibles y compatibilidad con distintas formas de interacción.

Respetar `prefers-reduced-motion`

Algunas personas configuran su dispositivo para reducir las animaciones. Por ese motivo, un loader CSS animado debería tener en cuenta la media query prefers-reduced-motion.

Podemos detener las animaciones y mantener el mensaje visible:

@media (prefers-reduced-motion: reduce) {
  .spinner,
  .loader-dots__animation span,
  .loader-bars__animation span,
  .loading-bar::before,
  .double-spinner::before,
  .double-spinner::after {
    animation: none;
  }
}

En este contexto, el indicador permanece estático mientras el texto continúa informando del proceso.

También podríamos sustituir el movimiento continuo por un cambio visual más discreto. Sin embargo, para un componente tan funcional como un loader, detener la animación suele ser una solución sencilla y comprensible.

Lo importante es que la información no dependa exclusivamente del movimiento. Aunque la animación se detenga, el usuario debe poder saber que existe una operación en curso.

Rendimiento de una animación de carga CSS

Los loaders suelen repetirse indefinidamente mientras dura una operación. Por tanto, una animación mal planteada puede consumir recursos durante todo el periodo de espera.

Siempre que sea posible, conviene priorizar:

transform;
opacity.

Estas propiedades permiten crear giros, desplazamientos, escalados y pulsaciones sin modificar directamente la geometría del documento.

Propiedades que conviene evitar

Animar propiedades como width, height, top, left, margin o padding puede obligar al navegador a recalcular posiciones y dimensiones durante la animación.

Por ejemplo, podríamos cambiar la altura de una barra de esta forma:

@keyframes inefficient-bar {
  from {
    height: 0.5rem;
  }

  to {
    height: 2rem;
  }
}

Sin embargo, podemos obtener un resultado visual parecido mediante una transformación:

@keyframes efficient-bar {
  from {
    transform: scaleY(0.25);
  }

  to {
    transform: scaleY(1);
  }
}

El segundo planteamiento mantiene intacto el espacio reservado por el elemento y evita que el resto del contenido tenga que adaptarse a una altura cambiante.

No abusar de `will-change`

La propiedad will-change puede avisar al navegador de que una característica va a modificarse:

.spinner {
  will-change: transform;
}

Sin embargo, no debería aplicarse automáticamente a todos los elementos animados.

Mantener demasiadas optimizaciones activas puede aumentar el consumo de recursos. En un spinner pequeño, el navegador suele gestionar correctamente una transformación sencilla sin necesidad de añadir will-change.

Retirar el loader cuando deja de ser necesario

Ocultar visualmente un loader no siempre significa que su animación se haya detenido. Si el elemento permanece activo, podría continuar ejecutándose aunque ya no resulte visible.

Lo recomendable es:

retirar el componente cuando termina la operación;
detener la animación si el loader queda fuera de uso;
evitar mantener indicadores de carga permanentes;
comprobar que no existen varios loaders ejecutándose sin necesidad.

Cómo elegir la duración y el movimiento adecuados

La velocidad influye directamente en la percepción del componente.

Un spinner excesivamente rápido puede parecer nervioso, mientras que uno demasiado lento puede transmitir que la aplicación está bloqueada.

Como punto de partida, podemos utilizar estos intervalos:

entre 0.7s y 1.2s para un spinner circular;
entre 1s y 1.5s para una secuencia de puntos;
entre 1.2s y 2s para una barra indeterminada.

No se trata de reglas absolutas. La duración debe ajustarse al tamaño del componente, al tipo de movimiento y al lenguaje visual de la interfaz.

Utilizar una curva de velocidad coherente

Para una rotación continua, linear suele ser una buena elección:

animation: spinner-rotation 0.8s linear infinite;

Como no existe un principio ni un final perceptible entre las vueltas, mantener una velocidad constante evita cambios bruscos.

Para puntos, escalados o barras que suben y bajan, una curva como ease-in-out crea una aceleración más gradual:

animation: dot-pulse 1.2s ease-in-out infinite;

No existe una curva universal para todos los loaders. Debemos elegirla en función del tipo de movimiento que queremos representar.

Cuándo mostrar un loader y cuándo evitarlo

No todas las acciones necesitan una animación de carga.

Si una respuesta es prácticamente inmediata, mostrar un loader durante una fracción de segundo puede provocar un destello innecesario. En estos casos, suele ser preferible esperar un pequeño intervalo antes de mostrarlo.

Este retraso no se controla necesariamente desde CSS, ya que depende de la lógica de la aplicación. La idea consiste en mostrar el indicador únicamente cuando la espera empieza a ser perceptible.

También debemos evitar loaders que permanezcan indefinidamente sin ofrecer ninguna salida. Cuando una operación puede fallar, la interfaz debería contemplar:

un límite de espera;
un mensaje de error;
una opción para volver a intentarlo;
una forma de cancelar el proceso, cuando sea posible.

El loader comunica actividad, pero no reemplaza la gestión de errores.

Cuándo CSS puede quedarse corto

Para un spinner, unos puntos o una barra indeterminada, CSS suele ser suficiente. Sin embargo, las animaciones más complejas pueden requerir control sobre secuencias, pausas, eventos o líneas temporales.

En esos casos, una biblioteca de animación puede ofrecer un control más preciso. Puedes consultar esta introducción a las animaciones web con GSAP para conocer una alternativa basada en JavaScript.

Esto no significa que debamos utilizar una biblioteca para cualquier loader. Para un indicador de carga sencillo, CSS suele ser la opción más directa y fácil de mantener.

Errores frecuentes al crear loaders con CSS

Utilizar demasiados elementos HTML

Algunos loaders incluyen numerosas etiquetas para dibujar formas que podrían resolverse mediante bordes o pseudoelementos.

No es obligatorio reducir siempre el HTML al mínimo, pero conviene diferenciar entre los elementos que aportan significado y los que son puramente decorativos.

Omitir el texto de carga

Una animación sin mensaje puede ser suficiente para algunos usuarios, pero no comunica el estado de forma universal.

Siempre que el contexto no sea completamente evidente, debemos proporcionar una etiqueta visible o accesible.

Mostrar un porcentaje falso

Una animación que avanza de cero a cien y vuelve a empezar no representa un progreso real.

Si desconocemos el porcentaje completado, debemos utilizar un indicador indeterminado y evitar transmitir una precisión que la aplicación no posee.

Crear una animación demasiado llamativa

El loader debe informar, no convertirse en el protagonista de la pantalla.

Los cambios bruscos de escala, los destellos rápidos o los giros excesivos pueden distraer y empeorar la experiencia.

Bloquear toda la interfaz sin necesidad

No todas las operaciones requieren una capa superpuesta que impida interactuar con la página.

Si solo se está actualizando una sección, podemos colocar el loader dentro de esa zona y mantener disponible el resto del contenido.

Olvidar los estados de error y contenido vacío

Una interfaz no debería quedar atrapada en un estado de carga eterno.

Además del loader, debemos diseñar qué ocurrirá cuando:

la petición falle;
no existan resultados;
se pierda la conexión;
la operación tarde más de lo esperado;
el usuario cancele el proceso.

Preguntas frecuentes sobre loaders animados con CSS

¿Se puede crear un loader completamente sin JavaScript?

Sí. La apariencia y el movimiento pueden crearse únicamente con HTML y CSS. Un spinner, unos puntos animados o una barra indeterminada no necesitan JavaScript para funcionar visualmente.

Sin embargo, en una aplicación dinámica suele ser necesario utilizar JavaScript o la lógica de un framework para mostrar el loader al comenzar una operación y retirarlo cuando termina.

¿Qué propiedades CSS son mejores para animar un loader?

Siempre que el diseño lo permita, conviene utilizar transform y opacity.

Con ellas podemos crear rotaciones, escalados, desplazamientos y pulsaciones sin modificar directamente el tamaño o la posición calculada de los elementos.

Propiedades como width, height, top o left deberían reservarse para casos en los que no exista una alternativa razonable.

¿Cómo puedo hacer que un spinner CSS sea accesible?

El spinner visual debería marcarse como decorativo mediante aria-hidden="true" y acompañarse de un mensaje que describa el estado, como “Cargando resultados…”.

También puede utilizarse role="status" para identificar la actualización y aria-busy para indicar que una región está siendo procesada. Además, conviene respetar prefers-reduced-motion para reducir o detener la animación cuando el usuario lo haya solicitado.

Una espera bien diseñada también comunica

Crear una animación de carga CSS puede parecer un detalle menor dentro de una interfaz, pero su impacto va más allá del movimiento. Un buen loader confirma que la aplicación ha recibido una acción, reduce la incertidumbre y ayuda al usuario a interpretar lo que está ocurriendo.

La parte visual puede resolverse con muy poco código. Un borde circular, una transformación y una regla @keyframes son suficientes para construir un spinner CSS funcional.

Sin embargo, el verdadero trabajo consiste en decidir cuándo mostrarlo, cómo comunicar el estado, qué ocurrirá si la operación falla y de qué manera se adaptará a las preferencias de movimiento.

Por eso, el mejor loader no es necesariamente el más original ni el más complejo. Es aquel que aparece cuando hace falta, mantiene una animación discreta, no perjudica el rendimiento y desaparece en cuanto el contenido está preparado.

En diseño de interfaces, esperar no siempre puede evitarse. Lo que sí podemos hacer es conseguir que esa espera resulte clara, accesible y coherente.

Cómo funciona @keyframes en CSS explicado fácil

Posted on 7 junio, 20269 junio, 2026 by marta

Las animaciones en CSS pueden parecer un detalle pequeño dentro de una interfaz, pero cuando están bien planteadas ayudan a que una web se sienta más fluida, clara y cuidada. Un botón que aparece suavemente, una tarjeta que entra en pantalla, un loader que gira mientras carga el contenido o un icono que llama la atención sin resultar molesto tienen algo en común: muchas veces están creados con @keyframes en CSS.

La regla @keyframes permite definir una animación paso a paso. Es decir, le indica al navegador cómo debe cambiar un elemento desde un estado inicial hasta un estado final, pasando por todos los puntos intermedios que queramos controlar.

Si ya has trabajado con transiciones o estás empezando a explorar el movimiento en interfaces, este concepto es clave para entender mejor las animaciones CSS y aplicarlas con criterio en tus proyectos.

En este artículo vamos a ver cómo funciona @keyframes en CSS, cuál es su sintaxis, qué propiedades intervienen, cuándo conviene usarlo y qué buenas prácticas deberías tener en cuenta para crear animaciones útiles, accesibles y fáciles de mantener.

Qué es @keyframes en CSS

@keyframes es una regla de CSS que se utiliza para definir los distintos estados de una animación. Su función principal es describir cómo cambia un elemento a lo largo del tiempo.

Dicho de forma sencilla, @keyframes CSS marca los pasos de una animación.

Por ejemplo, podemos hacer que un elemento pase de estar invisible a visible, que se desplace de izquierda a derecha, que cambie de tamaño, que rote, que parpadee o que combine varias transformaciones a la vez.

La estructura básica es esta:

@keyframes nombreAnimacion {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

En este caso, la animación empieza con una opacidad de 0, por lo que el elemento no se ve. Después termina con una opacidad de 1, de modo que aparece completamente visible.

Pero definir el @keyframes no es suficiente. Para que la animación se aplique a un elemento, necesitamos usar la propiedad animation.

.caja {
  animation: nombreAnimacion 1s ease-in-out;
}

Aquí estamos indicando que el elemento con clase .caja debe usar la animación llamada nombreAnimacion, que tendrá una duración de 1s y una curva de movimiento ease-in-out.

Cómo funciona @keyframes paso a paso

Para entender bien las animaciones con keyframes, conviene separar el proceso en dos partes: primero se define la animación y después se aplica al elemento.

1. Definir la animación con @keyframes

La regla @keyframes funciona como una especie de guion. Dentro de ella escribimos qué cambios queremos que ocurran durante la animación.

Podemos usar from y to cuando solo necesitamos indicar un punto inicial y un punto final.

@keyframes aparecer {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

Este ejemplo es muy común para crear un efecto de aparición suave.

También podemos escribirlo con porcentajes:

@keyframes aparecer {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

Ambas versiones hacen lo mismo. from equivale a 0% y to equivale a 100%.

La ventaja de usar porcentajes es que podemos añadir pasos intermedios. Por ejemplo, podemos hacer que un elemento no solo aparezca, sino que también se mueva, crezca o rebote durante el proceso.

2. Aplicar la animación con animation

Una vez definida la animación, necesitamos aplicarla a un selector CSS.

.elemento {
  animation-name: aparecer;
  animation-duration: 1s;
  animation-timing-function: ease;
}

También podemos escribirlo de forma abreviada:

.elemento {
  animation: aparecer 1s ease;
}

La propiedad animation es un shorthand, es decir, una forma resumida de escribir varias propiedades relacionadas con la animación.

Esta separación es importante: @keyframes define qué ocurre, mientras que animation define cómo se ejecuta.

Propiedades principales de CSS animation keyframes

Para trabajar correctamente con CSS animation keyframes, no basta con conocer @keyframes. También es importante entender las propiedades que controlan cómo se reproduce la animación.

animation-name

La propiedad animation-name indica el nombre de la animación que queremos aplicar.

.elemento {
  animation-name: aparecer;
}

Ese nombre debe coincidir con el nombre definido en @keyframes.

@keyframes aparecer {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

Si el nombre no coincide, la animación no funcionará. Este es uno de los errores más habituales cuando se empieza a trabajar con keyframes CSS.

animation-duration

animation-duration define cuánto dura la animación.

.elemento {
  animation-duration: 2s;
}

Puede expresarse en segundos (s) o milisegundos (ms).

.elemento {
  animation-duration: 500ms;
}

Una duración demasiado corta puede pasar desapercibida. Una duración demasiado larga puede resultar pesada. En interfaces web, muchas microinteracciones suelen funcionar bien entre 150ms y 500ms, aunque depende del tipo de efecto y del contexto.

Por ejemplo, no es lo mismo animar el hover de un botón que una entrada de contenido más elaborada. En el primer caso, una duración breve suele ser suficiente. En el segundo, puede tener sentido usar un tiempo algo mayor.

animation-timing-function

La propiedad animation-timing-function controla la velocidad de la animación a lo largo del tiempo.

.elemento {
  animation-timing-function: ease-in-out;
}

Algunos valores frecuentes son:

linear: mantiene una velocidad constante.
ease: empieza suave, acelera y termina suave.
ease-in: empieza lento y acelera.
ease-out: empieza rápido y termina lento.
ease-in-out: empieza y termina suavemente.

También se puede usar cubic-bezier() para crear una curva personalizada.

.elemento {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

Este nivel de control es útil cuando queremos que el movimiento tenga una sensación más natural.

animation-delay

animation-delay permite retrasar el inicio de la animación.

.elemento {
  animation-delay: 1s;
}

Esto significa que la animación empezará un segundo después de que se aplique.

Es especialmente útil cuando queremos animar varios elementos de forma escalonada, por ejemplo, una lista de tarjetas que aparece una detrás de otra.

.card:nth-child(1) {
  animation-delay: 0ms;
}

.card:nth-child(2) {
  animation-delay: 120ms;
}

.card:nth-child(3) {
  animation-delay: 240ms;
}

Este recurso puede ayudar a crear una sensación de continuidad, siempre que no se abuse de él.

animation-iteration-count

animation-iteration-count define cuántas veces se repite la animación.

.elemento {
  animation-iteration-count: 3;
}

Si queremos que se repita indefinidamente, usamos infinite.

.loader {
  animation: girar 1s linear infinite;
}

Este valor se utiliza mucho en loaders, iconos animados o efectos decorativos en bucle.

Aun así, conviene usarlo con moderación. Una animación infinita puede ser útil cuando informa de que algo está cargando, pero puede resultar molesta si se utiliza solo como recurso decorativo.

animation-direction

animation-direction indica la dirección en la que se reproduce la animación.

.elemento {
  animation-direction: alternate;
}

Algunos valores posibles son:

normal: la animación va de principio a fin.
reverse: la animación se reproduce al revés.
alternate: alterna entre ida y vuelta.
alternate-reverse: alterna, pero empieza al revés.

Esto resulta muy útil para animaciones que deben ir y volver, como un elemento flotando suavemente.

animation-fill-mode

animation-fill-mode controla qué estilos conserva el elemento antes o después de la animación.

.elemento {
  animation-fill-mode: forwards;
}

El valor forwards hace que el elemento conserve el estado final de la animación.

Por ejemplo, si una tarjeta entra desde abajo y termina en su posición normal, forwards permite que se quede en esa posición al terminar.

@keyframes subir {
  from {
    transform: translateY(40px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.tarjeta {
  animation: subir 600ms ease-out forwards;
}

Sin forwards, el elemento podría volver a su estado inicial al finalizar la animación, algo que muchas veces no queremos.

Ejemplo práctico de @keyframes CSS

Veamos un ejemplo completo. Imagina que queremos animar una tarjeta para que aparezca suavemente desde abajo.

<div class="card">
  <h2>Animación con CSS</h2>
  <p>Esta tarjeta aparece con un movimiento suave.</p>
</div>

.card {
  max-width: 320px;
  padding: 24px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);

  animation: entradaTarjeta 600ms ease-out forwards;
}

@keyframes entradaTarjeta {
  0% {
    opacity: 0;
    transform: translateY(32px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

En este caso, la tarjeta empieza con opacity: 0, por lo que no se ve. Además, tiene transform: translateY(32px), así que aparece ligeramente desplazada hacia abajo.

Al llegar al 100%, la tarjeta ya es visible y vuelve a su posición natural.

Este tipo de animación es muy útil para mejorar la percepción de fluidez en una interfaz. No es una animación decorativa sin sentido: ayuda a que el contenido aparezca de una forma más amable y menos brusca.

Si estás creando interfaces con componentes reutilizables, este mismo enfoque puede combinarse con metodologías de diseño más ordenadas, como explico en el artículo sobre metodologías de desarrollo de software, especialmente cuando trabajas en proyectos donde diseño, desarrollo y experiencia de usuario deben avanzar de forma coordinada.

Usar porcentajes intermedios en @keyframes

Una de las ventajas de @keyframes CSS es que no estamos limitados a un inicio y un final. Podemos añadir tantos puntos intermedios como necesitemos.

@keyframes rebote {
  0% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(-30px);
  }

  60% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(0);
  }
}

Este ejemplo crea una animación de rebote. El elemento sube, baja un poco y vuelve a su posición original.

.boton {
  animation: rebote 700ms ease-in-out;
}

Los porcentajes intermedios permiten construir animaciones más expresivas. Sin embargo, conviene usarlos con criterio. Cuantos más pasos añadimos, más compleja se vuelve la animación y más fácil es que el resultado parezca exagerado.

Cuándo usar varios pasos

Usar varios porcentajes tiene sentido cuando queremos crear una secuencia clara. Por ejemplo:

Un icono que rebota.
Un loader con varios estados.
Una ilustración que cambia de posición.
Un elemento que entra, se agranda y vuelve a su tamaño normal.
Un aviso que llama la atención con un pequeño movimiento.

Cuándo evitar demasiados pasos

No siempre hace falta complicar una animación. Si solo queremos suavizar un cambio entre dos estados, puede bastar con una transición o con un @keyframes muy sencillo.

La clave está en hacerse una pregunta antes de añadir movimiento: ¿esta animación ayuda a entender mejor la interfaz o solo añade ruido visual?

Diferencia entre transition y @keyframes

Una duda muy común cuando se empieza a trabajar con animaciones en CSS es cuándo usar transition y cuándo usar @keyframes.

La diferencia principal es esta:

transition suaviza el cambio entre dos estados.
@keyframes permite crear una secuencia de animación con uno o varios pasos.

Por ejemplo, si queremos que un botón cambie de color al pasar el ratón por encima, lo más lógico es usar transition.

.boton {
  background: #753a88;
  transition: background 200ms ease;
}

.boton:hover {
  background: #cc2b5e;
}

Aquí solo hay dos estados: normal y hover. Por eso transition es suficiente.

En cambio, si queremos que un icono pulse constantemente, necesitamos una animación con @keyframes.

.icono {
  animation: pulso 1.5s ease-in-out infinite;
}

@keyframes pulso {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.12);
  }

  100% {
    transform: scale(1);
  }
}

Aquí no estamos simplemente pasando de un estado a otro por una interacción del usuario. Estamos creando una secuencia que se repite en el tiempo.

Regla rápida para elegir

Una forma sencilla de decidir es esta:

Si hay dos estados, usa transition.
Si hay una secuencia, repetición o control avanzado, usa @keyframes.

Esta regla no cubre todos los casos posibles, pero ayuda mucho cuando estás empezando.

También es útil relacionarlo con el diseño de experiencia de usuario. El movimiento no debería añadirse solo porque “queda bonito”, sino porque ayuda a comunicar mejor una acción o un cambio de estado. Esta idea conecta directamente con temas como el Efecto Patito de Goma aplicado al desarrollo: muchas veces, explicar qué queremos que haga una interfaz nos ayuda a elegir mejor la solución técnica.

Animaciones útiles con keyframes CSS

Las animaciones con keyframes pueden aplicarse a muchos elementos de una web. Lo importante es que tengan una intención clara.

Animación de aparición suave

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.elemento {
  animation: fadeIn 400ms ease forwards;
}

Es una de las animaciones más sencillas y más utilizadas. Sirve para mostrar contenido sin que aparezca de golpe.

Animación de entrada lateral

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.menu {
  animation: slideIn 500ms ease-out forwards;
}

Puede funcionar bien en menús, paneles, banners o bloques de contenido.

Loader giratorio

.loader {
  width: 40px;
  height: 40px;
  border: 4px solid #eeeeee;
  border-top-color: #cc2b5e;
  border-radius: 50%;
  animation: girar 800ms linear infinite;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

Este ejemplo es muy habitual para indicar que una acción está en proceso. La animación es infinita porque el loader debe seguir girando mientras se carga el contenido.

Efecto flotante

@keyframes flotar {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }

  100% {
    transform: translateY(0);
  }
}

.ilustracion {
  animation: flotar 3s ease-in-out infinite;
}

Este tipo de animación suele usarse en ilustraciones, iconos decorativos o elementos destacados. Debe ser suave para no cansar al usuario.

Buenas prácticas para usar @keyframes en CSS

Las animaciones pueden mejorar mucho una interfaz, pero también pueden empeorarla si se usan sin criterio. Por eso es importante aplicar algunas buenas prácticas.

Usa transform y opacity siempre que puedas

Cuando animes elementos, intenta priorizar propiedades como transform y opacity.

.elemento {
  transform: translateY(20px);
  opacity: 0;
}

Estas propiedades suelen ser más eficientes para el navegador que animar valores como width, height, top, left o margin.

Por ejemplo, en lugar de mover un elemento con top, es preferible usar transform: translate().

@keyframes moverConTop {
  from {
    top: 0;
  }

  to {
    top: 100px;
  }
}

@keyframes moverConTransform {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(100px);
  }
}

Esto ayuda a que la animación sea más fluida y tenga mejor rendimiento.

No abuses de las animaciones infinitas

Las animaciones infinitas pueden ser útiles, pero también pueden distraer. Un loader giratorio tiene sentido porque informa al usuario de que algo está cargando. Un icono que no deja de moverse sin motivo puede resultar molesto.

Antes de usar infinite, pregúntate si la animación realmente necesita repetirse todo el tiempo.

.elemento {
  animation-iteration-count: infinite;
}

Si no aporta información o contexto, quizá es mejor evitarlo.

Cuida la accesibilidad

No todas las personas perciben el movimiento de la misma manera. Algunas animaciones pueden causar incomodidad, mareo o dificultad para concentrarse.

Por eso es buena práctica respetar la preferencia del usuario con prefers-reduced-motion.

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    scroll-behavior: auto;
  }
}

También puedes desactivar animaciones concretas:

@media (prefers-reduced-motion: reduce) {
  .ilustracion {
    animation: none;
  }
}

Esto demuestra cuidado por la experiencia de todas las personas usuarias.

La accesibilidad no debería tratarse como un extra, sino como parte del propio proceso de diseño y desarrollo. Igual que cuidamos la estructura, los textos o la jerarquía visual, también deberíamos cuidar cómo se comporta el movimiento en pantalla.

Mantén nombres claros

El nombre de una animación debe explicar qué hace.

@keyframes fadeIn {
}

@keyframes slideUp {
}

@keyframes pulse {
}

Evita nombres poco descriptivos como animacion1, movimiento2 o efectoFinal.

En proyectos grandes, una nomenclatura clara ayuda mucho a mantener el CSS ordenado.

Evita animar demasiados elementos a la vez

Una página con muchas animaciones simultáneas puede parecer desordenada y afectar al rendimiento. Además, si todo se mueve, nada destaca.

La animación debe guiar la atención, no competir por ella.

Una buena práctica es reservar las animaciones para momentos concretos:

Entrada de contenido importante.
Confirmación de una acción.
Estados de carga.
Feedback visual.
Microinteracciones relevantes.

Errores comunes al trabajar con @keyframes CSS

Aunque @keyframes es bastante fácil de entender, hay errores frecuentes que pueden hacer que la animación no funcione como esperamos.

El nombre de la animación no coincide

.caja {
  animation: aparecerCaja 1s ease;
}

@keyframes aparecer {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

En este caso, la animación no se aplicará porque el elemento llama a aparecerCaja, pero el @keyframes se llama aparecer.

La solución es usar exactamente el mismo nombre.

.caja {
  animation: aparecer 1s ease;
}

Falta la duración

.caja {
  animation-name: aparecer;
}

Si no indicamos una duración, la animación no tendrá tiempo para ejecutarse como esperamos. Por eso siempre conviene añadir animation-duration o usar el shorthand completo.

.caja {
  animation: aparecer 1s ease;
}

El elemento vuelve a su estado inicial

Esto ocurre cuando la animación termina y no se conserva el estado final.

.caja {
  animation: subir 500ms ease;
}

Si queremos que el elemento conserve el último estado de la animación, podemos añadir forwards.

.caja {
  animation: subir 500ms ease forwards;
}

Usar animaciones donde bastaría una transición

No todo necesita @keyframes. Si solo quieres suavizar un hover, un cambio de color o una apertura sencilla, probablemente transition sea suficiente.

Usar la herramienta adecuada hace que el CSS sea más limpio y fácil de mantener.

Este mismo criterio también se puede aplicar a otros aspectos del desarrollo frontend. Por ejemplo, cuando eliges entre una solución sencilla o una más compleja en React, conviene pensar primero en el problema que quieres resolver. Si estás en esa fase de aprendizaje, puede ayudarte esta guía sobre cómo aprender React desde cero.

Ejemplo completo: botón con efecto de pulso

Veamos ahora un ejemplo completo de un botón que llama la atención con un pulso suave.

<button class="cta-button">
  Ver proyecto
</button>

.cta-button {
  padding: 14px 24px;
  border: 0;
  border-radius: 999px;
  background: #cc2b5e;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;

  animation: pulsoSuave 2s ease-in-out infinite;
}

@keyframes pulsoSuave {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(204, 43, 94, 0.35);
  }

  70% {
    transform: scale(1.04);
    box-shadow: 0 0 0 14px rgba(204, 43, 94, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(204, 43, 94, 0);
  }
}

Este efecto puede ayudar a destacar una llamada a la acción, pero debe usarse con moderación. Si todos los botones de una web tienen animaciones infinitas, el efecto deja de ser útil y puede resultar invasivo.

Una alternativa más equilibrada sería activar la animación solo en momentos concretos o aplicarla a un único CTA principal.

@keyframes y diseño de interfaces: no todo es decoración

Uno de los errores más habituales al hablar de animaciones CSS es pensar que solo sirven para “hacer bonito”. En realidad, el movimiento puede tener una función muy importante dentro de una interfaz.

Una buena animación puede:

Ayudar a entender que un elemento ha aparecido o desaparecido.
Indicar que una acción está en progreso.
Guiar la atención hacia una zona concreta.
Reforzar una interacción.
Hacer que los cambios de estado sean más naturales.

Por ejemplo, cuando se abre un menú lateral, una animación de entrada puede ayudar a entender de dónde viene ese panel. Cuando aparece un mensaje de confirmación, una pequeña transición puede hacer que el cambio sea más claro. Cuando se carga contenido, un loader evita que el usuario piense que la página se ha quedado bloqueada.

La clave está en usar las animaciones con keyframes como parte de la comunicación visual, no como un adorno añadido al final.

Esto también tiene relación con el diseño UI/UX. Una herramienta como Figma puede ayudarte a pensar y prototipar estos comportamientos antes de llevarlos a código. Si te interesa esa parte del proceso, puedes ampliar con el artículo sobre pros y contras de usar Figma como herramienta de diseño UI/UX.

Cómo organizar keyframes en un proyecto CSS

En proyectos pequeños, puedes escribir los @keyframes cerca del componente o bloque donde se utilizan. Pero en proyectos más grandes, conviene mantener cierto orden.

Agrupar animaciones reutilizables

Si tienes animaciones que se repiten en varias partes del sitio, puedes crear una sección específica para ellas.

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Después puedes aplicarlas en distintos componentes.

.card {
  animation: slideUp 500ms ease-out forwards;
}

.modal {
  animation: fadeIn 300ms ease forwards;
}

Crear clases utilitarias

Otra opción es crear clases reutilizables.

.animate-fade-in {
  animation: fadeIn 400ms ease forwards;
}

.animate-slide-up {
  animation: slideUp 500ms ease-out forwards;
}

Esto puede ser útil si trabajas con una metodología de estilos más modular o si quieres aplicar animaciones de forma consistente.

Documentar las animaciones importantes

Si una animación tiene una función concreta dentro del diseño, merece la pena documentarla. No hace falta escribir una novela, pero sí dejar claro para qué sirve.

@keyframes cardEntrance {
  from {
    opacity: 0;
    transform: translateY(32px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Este tipo de organización ayuda a que otras personas del equipo entiendan por qué existe esa animación.

@keyframes en CSS y rendimiento web

El rendimiento es otro aspecto importante cuando hablamos de animaciones. Una animación puede verse muy bien en un ordenador potente, pero funcionar peor en dispositivos más antiguos o en móviles con menos recursos.

Por eso, al trabajar con @keyframes, conviene tener en cuenta tres ideas básicas.

Prioriza animaciones ligeras

Las propiedades transform y opacity suelen ser las mejores candidatas para animar porque permiten movimientos fluidos sin forzar tantos recálculos visuales.

En cambio, animar propiedades relacionadas con el layout, como width, height, top, left, margin o padding, puede generar más trabajo para el navegador.

No animes todo al cargar la página

Animar demasiados elementos al mismo tiempo puede ralentizar la experiencia inicial. Si todo entra, rebota, gira y aparece a la vez, la página pierde claridad.

Es mejor seleccionar algunos elementos clave y usar el movimiento para reforzar la jerarquía visual.

Comprueba la experiencia en móvil

Muchas veces diseñamos y probamos animaciones en escritorio, pero gran parte del tráfico llega desde móvil. Una animación que parece sutil en una pantalla grande puede resultar excesiva en una pantalla pequeña.

Por eso conviene probar siempre cómo se siente la animación en diferentes tamaños de pantalla.

Preguntas frecuentes sobre @keyframes en CSS

¿Qué diferencia hay entre @keyframes y animation en CSS?

@keyframes define los pasos de la animación, mientras que animation aplica esa animación a un elemento y controla aspectos como la duración, la repetición, el retraso o la curva de movimiento.

Dicho de otra forma: @keyframes describe qué ocurre y animation indica cómo y cuándo se ejecuta.

¿Puedo usar @keyframes para animar cualquier propiedad CSS?

Técnicamente, muchas propiedades CSS pueden animarse, pero no todas son igual de recomendables. Para obtener mejores resultados, suele ser preferible animar transform y opacity, porque ofrecen mejor rendimiento y suelen generar movimientos más fluidos.

Animar propiedades como width, height, top, left o margin puede ser más costoso para el navegador, sobre todo si se aplica a muchos elementos a la vez.

¿Cuándo debería usar @keyframes en lugar de transition?

Conviene usar @keyframes cuando necesitas una secuencia, una repetición o varios pasos intermedios. Por ejemplo, un loader giratorio, un efecto de pulso, una entrada elaborada o una animación que se repite.

En cambio, si solo quieres suavizar el cambio entre dos estados, como un hover o un menú que se abre y se cierra, probablemente sea mejor usar transition.

Cuando el movimiento también comunica

Aprender cómo funciona @keyframes en CSS es mucho más que memorizar una sintaxis. Es entender que el movimiento forma parte del diseño de una interfaz.

Una animación bien planteada no está ahí para llamar la atención porque sí. Está ahí para acompañar al usuario, explicar un cambio, suavizar una transición o reforzar una acción. Por eso, antes de añadir un efecto, conviene preguntarse qué aporta.

@keyframes CSS te da mucho control: puedes definir estados, crear secuencias, repetir movimientos y construir efectos visuales complejos sin necesidad de JavaScript. Pero ese control también requiere criterio.

Si estás empezando, quédate con esta idea: usa keyframes CSS cuando necesites controlar una animación paso a paso. Para cambios simples entre dos estados, una transition suele ser suficiente. Para secuencias, repeticiones y movimientos más elaborados, @keyframes es la herramienta adecuada.

Al final, animar bien no significa mover más cosas. Significa moverlas mejor. Y cuando el movimiento tiene intención, la interfaz se siente más clara, más fluida y mucho más cuidada.

¿Qué es un skeleton loader?

Skeleton loader, spinner y barra de progreso

Por qué los skeleton loaders mejoran la experiencia de usuario

Reducción de los saltos de contenido

Sensación de progreso

Cómo crear un skeleton loader básico con CSS

Crear el efecto de pulso

Crear un efecto shimmer con gradiente

Personalizar el skeleton con variables CSS

Cómo construir skeleton loaders reutilizables

Skeleton para una lista de elementos

Evitar que todos los bloques parezcan idénticos

Accesibilidad en los skeleton loaders

Comunicar el estado sin describir cada bloque

Respetar prefers-reduced-motion

Rendimiento de las animaciones de carga

Utilizar will-change con moderación

¿Cuántos skeletons deberían mostrarse?

Errores frecuentes al diseñar skeleton screens

Utilizar una estructura diferente al contenido final

Mantener el skeleton aunque la carga haya fallado

Usar animaciones demasiado rápidas

Mostrar skeletons para cargas casi instantáneas

Utilizar skeletons sin una necesidad real

Cuándo conviene utilizar un skeleton loader

Cómo integrar el skeleton loader con JavaScript

Evitar la inyección directa de contenido no confiable

Buenas prácticas para un loading placeholder CSS efectivo

Preguntas frecuentes sobre skeleton loaders con CSS

¿Un skeleton loader mejora la velocidad real de una página?

¿Es mejor utilizar un skeleton loader o un spinner?

¿Se puede crear un skeleton screen únicamente con CSS?

Diseñar la espera también forma parte de la experiencia

Qué es un loader CSS y para qué sirve

Diferencias entre loader, spinner y barra de progreso

Qué significa crear un loader solo con CSS

Fundamentos de una animación de carga CSS

La estructura HTML del loader

Cómo funciona @keyframes

Propiedades principales de animation

Cómo crear un spinner CSS circular

HTML del spinner

CSS del spinner

Personalizar el spinner mediante variables CSS

Cómo crear un loader de puntos animados

Estructura HTML

Estilos de los puntos

Ocultar el texto solo visualmente

Cómo crear un loader de barras con CSS

HTML del loader

CSS de las barras animadas

Cómo crear una barra de carga indeterminada

Marcado HTML

Estilos CSS

Crear un loader con pseudoelementos

Accesibilidad en los loaders animados

Añadir un mensaje de estado

Utilizar role="status"

Indicar que una región está ocupada

Respetar prefers-reduced-motion

Rendimiento de una animación de carga CSS

Propiedades que conviene evitar

No abusar de will-change

Retirar el loader cuando deja de ser necesario

Cómo elegir la duración y el movimiento adecuados

Utilizar una curva de velocidad coherente

Cuándo mostrar un loader y cuándo evitarlo

Cuándo CSS puede quedarse corto

Errores frecuentes al crear loaders con CSS

Utilizar demasiados elementos HTML

Omitir el texto de carga

Mostrar un porcentaje falso

Crear una animación demasiado llamativa

Bloquear toda la interfaz sin necesidad

Olvidar los estados de error y contenido vacío

Preguntas frecuentes sobre loaders animados con CSS

¿Se puede crear un loader completamente sin JavaScript?

¿Qué propiedades CSS son mejores para animar un loader?

¿Cómo puedo hacer que un spinner CSS sea accesible?

Una espera bien diseñada también comunica

Respetar `prefers-reduced-motion`

Utilizar `will-change` con moderación

Cómo funciona `@keyframes`

Propiedades principales de `animation`

Utilizar `role="status"`

Respetar `prefers-reduced-motion`

No abusar de `will-change`