Cómo Crear Spinners/Loaders con CSS Puro

Si estás buscando una forma sencilla y elegante de añadir animaciones a tus proyectos sin depender de librerías externas, aquí tienes 4 ejemplos de loaders animados creados únicamente con CSS. ¡Perfectos para cualquier diseño moderno!

Loader Circular Giratorio

Un clásico y limpio spinner circular.

<div class="loader-circle"></div>

.loader-circle {
  width: 50px;
  height: 50px;
  border: 5px solid #ccc;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

Dots / Puntos que Brincan

Tres puntos animados que simulan un movimiento de rebote.

<div class="loader-dots">
  <span></span><span></span><span></span>
</div>

.loader-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.loader-dots span {
  width: 10px;
  height: 10px;
  background-color: #3498db;
  border-radius: 50%;
  animation: bounce 0.6s infinite ease-in-out;
}

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

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

@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

Barra Deslizante

Una barra animada que simula un cargador infinito.

<div class="loader-bar"></div>

.loader-bar {
  width: 80px;
  height: 8px;
  background: linear-gradient(to right, #3498db 0%, #fff 50%, #3498db 100%);
  background-size: 200% 100%;
  animation: slide 1.5s infinite linear;
}

@keyframes slide {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

¡Listo! 🎉 Solo necesitas copiar y pegar el HTML y CSS en tu proyecto. Estos loaders son ligeros, personalizables, y funcionales en cualquier navegador moderno. 🚀

👉 ¿Cuál es tu favorito? Déjame tus comentarios. 😊