Generador de Loaders CSS

Las animaciones de carga en CSS se basan en dos elementos: una forma dibujada con bordes, transformaciones o box-shadow, y una regla @keyframes que la mueve en bucle. Esta herramienta incluye seis estilos de loader, cada uno con una técnica distinta. Anillo y Anillo Doble usan el truco del borde, coloreando de forma diferente parte del borde de un círculo y haciéndolo girar con rotate. Puntos y Barras escalonan la misma animación en varios elementos usando animation-delay, de modo que cada pieza se mueve un instante detrás de la anterior. Pulso escala y desvanece un solo círculo, y Onda expande un anillo hacia afuera mientras su opacidad baja a cero, el mismo efecto que se usa en los indicadores de carga tipo radar.

Elige un estilo y luego ajusta tamaño, color, grosor y velocidad con los controles debajo de la vista previa. El tamaño cambia las dimensiones generales de la forma, el grosor controla el ancho del borde en los estilos basados en anillo, el color actualiza todos los elementos de la animación a la vez, y la velocidad define cuántos segundos dura un ciclo, desde rápido y enérgico hasta lento y calmado. El selector de fondo de vista previa te permite comprobar cómo se ve el loader sobre superficies blancas, grises y oscuras antes de decidir un color, ya que un anillo de color claro puede perder contraste sobre un fondo pálido.

Cuando se vea bien, copia el bloque de CSS, que incluye los keyframes y la regla de clase, junto con el pequeño fragmento de HTML necesario para mostrarlo. Nada se sube a ningún lado; el loader se genera y se muestra completamente en tu navegador.