Ir a la herramienta
JoeLucky

Haz clic en ★ para guardar una herramienta

Categorías de herramientas

Código a imagenGenerador de degradados CSSGlassmorphism CSSGenerador de box-shadowGenerador de loaders CSSGenerador de blobs SVGSVG a PNGVerificador de contraste de colorConversor PX / REM / EM
JoeLucky

Herramientas en línea prácticas, todas en un solo lugar

Política de privacidadTérminos del servicio

© 2026 JoeLucky®. Todos los derechos reservados.

  1. JoeLucky
  2. /CSS y diseño
  3. /Generador de loaders CSS

Generador de loaders CSS

Genera indicadores de carga con CSS puro.

Elige el tipo de animación

Ajustes

#6366F1
Tamaño40px
Velocidad (s)1.0s

⚡ Valor más bajo = animación más rápida

Vista previa — Spinner
Código CSS
<!-- HTML -->
<div class="loader" style="width:40px;height:40px"></div>

<!-- CSS -->
<style>
.loader {
  border: 4px solid rgba(0,0,0,0.1);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
</style>

CSS Y DISEÑO SIMILARES

Ver todas
Código a imagen

Convierte fragmentos de código en capturas de pantalla atractivas.

Abrir →
Generador de degradados CSS

Diseña degradados lineales, radiales y cónicos y copia el CSS al instante.

Abrir →
Glassmorphism CSS

💬 Comentarios

?

Aún no hay comentarios. ¡Sé el primero!

¿QUÉ ES Generador de loaders CSS?

Elige entre 10 animaciones de carga en CSS puro, ajusta color, tamaño y velocidad y copia el HTML y el CSS. No requiere JavaScript, así que encaja en cualquier página o framework.

¿Cómo se usa?

  1. Elige entre 10 tipos de animación: spinner para carga de página completa, puntos para indicadores de chat, skeleton para marcadores de contenido, ripple para respuesta de botón y más.
  2. Ajusta el color (selector), el tamaño (20–80 px) y la velocidad (0,3–3,0 s) a la izquierda. La vista previa de cuadrícula punteada a la derecha se actualiza en vivo.
  3. Velocidad más baja = animación más rápida. 0,8–1,5 s funciona mejor para la mayoría de los loaders; por debajo de 0,5 s parece frenético, por encima de 2 s parece congelado.
  4. Tres botones de copia en la cabecera de la vista previa: «HTML» solo para el marcado, «CSS» solo para los estilos, «Copiar todo» para el bloque completo comentado.
  5. Todas las animaciones son CSS puro sin dependencias de JavaScript — pega directamente en HTML estático, React, Vue o cualquier framework.

Preguntas frecuentes

¿Qué tipos de animaciones de carga CSS hay?

Círculos giratorios, puntos que rebotan, barras de progreso, ondas, pulsos y más, todo en CSS puro.

¿Estas animaciones requieren JavaScript?

No. Todas las animaciones son CSS puro, sin ninguna dependencia de JavaScript.

¿Puedo personalizar el color y el tamaño?

Sí. Selector de color y controles de tamaño con vista previa instantánea y salida CSS.

Genera en directo el código de desenfoque de fondo y borde translúcido.

Abrir →