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.