Generador de loader / spinner CSS

Elija un estilo de loader (círculo, puntos, barras, pulsación), personalice su color, tamaño y velocidad, y copie el código HTML y CSS generado. Sin imágenes: solo CSS puro, generado y previsualizado en su navegador.

Estilo de loader

Color

Tamaño: 48px

Velocidad: 1s

Código HTML + CSS

<style>
.byteryo-spinner {
  width: 48px;
  height: 48px;
  border: 5px solid #4f46e533;
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: byteryo-spin 1s linear infinite;
}

@keyframes byteryo-spin {
  to { transform: rotate(360deg); }
}
</style>

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

Cómo funciona

Un loader animado con CSS puro es mucho más ligero que un GIF y se adapta automáticamente al color y al tema de su interfaz. Cada estilo propuesto aquí se basa en una animación CSS (@keyframes) distinta: rotación continua para el círculo, desfase temporal entre varios elementos para los puntos y las barras, y variación de escala y opacidad para la pulsación.

¿Funciona el código generado sin JavaScript?

Sí, la animación se gestiona por completo con CSS mediante @keyframes: basta con copiar el bloque <style> y el HTML correspondiente en su página; no se necesita ningún script para que el loader gire.

¿Cómo mostrar el loader solo durante una carga?

Añada o quite dinámicamente el bloque HTML del loader (o alterne una clase display: none) con su framework JavaScript habitual mientras haya una solicitud o un proceso en curso, y ocúltelo una vez que el contenido esté listo.

El código se genera al instante en su navegador a partir de sus ajustes, sin conexión a ningún servidor.