04 Capítulo 4 · Lección 4

Loading States

Redactado por

Author

Fecha de publicación

07/07/2025

Tiempo de lectura

6 min

Tema

Interactions

¿Qué son los Loading States?

Los estados de carga son representaciones visuales interinas que se muestran cuando la aplicación necesita tiempo para recuperar datos, procesar un formulario o conectarse a una API. Son la manera en que la UI pide paciencia de forma elegante.

¿Para qué sirven?

Sin un estado de carga, la interfaz parece congelada. Un usuario impaciente hará clic varias veces en un botón de "Comprar" si no sabe que su primer clic ya se está procesando, causando errores graves o cargos duplicados.

Reducir la fricción: Una animación suave hace que el tiempo de espera se perciba como más corto psicológicamente.
Prevenir acciones destructivas: Deshabilita interacciones secundarias mientras algo crítico está sucediendo.
Mantener el contexto: Los inline-loaders en los botones evitan tener que llevar al usuario a otra página.

¿Cómo se usan?

El patrón moderno evita los spinners gigantes de pantalla completa. En su lugar, cuando el usuario hace clic, se inyecta una clase CSS en el propio botón que oculta el texto, inyecta un pequeño SVG rotatorio en el centro, y usa pointer-events: none para evitar el doble envío.

Consejo profesional

Para peticiones ultra rápidas (menos de 500ms), no muestres el loader de inmediato. Aplica un setTimeout para que el loader solo aparezca si la carga se demora, evitando 'flashes' visuales incómodos.

Botón con estado de carga integrado

> _

<button class="submit-btn" id="submitBtn">
  <span class="btn-text">Guardar cambios</span>
  <span class="btn-loader"></span>
</button>

.submit-btn {
  position: relative;
  padding: 14px 28px;
  background: #9FA6FF;
  color: #0f172a;
  border: none;
  border-radius: 0;
  font-weight: 600;
  font-family: 'afronaut', serif;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  min-width: 160px;
}

.btn-text {
  transition: opacity 0.3s ease, transform 0.3s ease;
  display: inline-block;
  font-family: 'afronaut', serif;
}

.btn-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  width: 20px;
  height: 20px;
  border: 3px solid rgba(15, 23, 42, 0.3);
  border-top-color: #0f172a;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s ease;
}

.submit-btn.loading {
  background: #8090e0;
  cursor: wait;
}

.submit-btn.loading .btn-text {
  opacity: 0;
  transform: translateY(-20px);
}

.submit-btn.loading .btn-loader {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: spin 1s infinite linear;
}

@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}

> _

Haz clic en el botón para simular una petición asíncrona de 3 segundos.

Errores comunes

01

Bloquear toda la pantalla Mostrar un spinner gigante por tareas pequeñas frustra la navegación.

02

Dejar el botón activo Olvidar cambiar el cursor o deshabilitar clicks resulta en peticiones duplicadas.

Practica lo aprendido

Implementa un botón que asuma el estado de carga al hacer clic con un spinner integrado.

01 Crea un botón con min-width fijo para que no colapse.

02 Añade un span .spinner oculto dentro del botón.

03 Anima el spinner con @keyframes y border-top.

04 Con JS, añade la clase .loading al clic y ocúltala tras 3s.

05 Mueve el texto fuera con translateY y muestra el spinner.