Componentes de Loaders

Componentes de Loaders listos para copiar: demo en vivo y código fuente. Acceso lifetime en Ui Ux Library.

• Zoomies — Barra de progreso indeterminada: un tramo de color cruza la pista de lado a lado con aceleración y frenada. Para cabeceras, formularios y cargas de página.
• Wobble — Un punto va y viene de extremo a extremo con una curva de vaivén suave. El loader más ligero del catálogo: cabe en una línea de texto o en un botón.
• Waveform — Cuatro barras suben y bajan en ola desfasada, como el ecualizador de un reproductor. Perfecto para audio, transcripción o procesos en streaming.
• Trio — Tres puntos en triángulo giran a la vez que oscilan hacia el centro y vuelven. Ritmo constante, huella mínima: ideal para estados de carga discretos.
• Trefoil — Un segmento recorre un nudo trébol que se cruza sobre sí mismo, sin principio ni final visibles. Hipnótico para esperas largas y pantallas de carga.
• Treadmill — Un cubo voltea sobre su arista y se deforma al aterrizar, avanzando como sobre una cinta sin fin. Un loader con física y sentido del humor.
• Tailspin — Anillo que gira con un degradado cónico: el trazo se desvanece hacia la cola en lugar de cortarse. El spinner por defecto de cualquier producto serio.
• TailChase — Seis puntos giran persiguiéndose la cola: la estela se estira y se vuelve a agrupar en cada vuelta. El clásico spinner circular, con carácter.
• Superballs — Dos bolas orbitan en diagonal cruzándose en el centro, creciendo y desvaneciéndose con la profundidad. Un spinner con volumen, sin dejar de ser CSS puro.
• Squircle — Spinner con forma de squircle: un segmento de trazo redondeado recorre un cuadrado de esquinas suaves. El aire de iOS, sin salirse del sistema.
• Square — Spinner cuadrado: un segmento de trazo recorre sin fin el perímetro de un cuadrado sobre una pista tenue. Sobrio y geométrico, encaja en botones y tablas.
• Spiral — Ocho puntos repartidos en círculo que oscilan entre el centro y el borde con retardos escalonados, sobre un eje que gira. Loader hipnótico en CSS puro.
• Ripples — Cuatro ondas encadenadas que se expanden desde el centro y se desvanecen, como gotas en un estanque. Loader en CSS puro.
• Ring2 — Aro con un arco de longitud constante girando a velocidad uniforme sobre una pista de fondo. Spinner SVG sobrio, ideal para botones y estados de carga.
• Ring — Aro de carga clásico: el arco gira mientras se estira y se encoge, al estilo del spinner de Material. SVG con grosor y pista de fondo configurables.
• Reuleaux — Un segmento de trazo recorre sin fin el perímetro de un triángulo de Reuleaux sobre una pista de fondo. Loader SVG con grosor, longitud y opacidad configurables.
• Quantum — Nube cuántica de trece partículas recorriendo órbitas inclinadas y desfasadas sobre un eje que gira lentamente. Loader orgánico en CSS puro.
• Pulsar — Dos círculos desfasados medio ciclo que laten desde el centro con easing suave, como un pulsar. Loader en CSS puro.
• Pinwheel — Molinillo de seis barras que rotan con retardos progresivos y opacidad decreciente, dejando una estela. Loader en CSS puro con grosor configurable.
• Ping — Ondas concéntricas que se expanden desde el centro y se desvanecen, como el ping de un radar. Loader ligero en CSS puro.
• Orbit — Dos puntos que orbitan sobre un eje horizontal con escala y opacidad variables para simular profundidad. Loader minimalista en CSS puro.
• NewtonsCradle — Péndulo de Newton en CSS puro: cuatro bolas alineadas en las que la primera y la última se balancean alternativamente para indicar carga.
• Momentum — Dos bolas orbitan mientras la inercia las estira y las junta, con dos periodos desfasados en CSS puro. Para cargas cortas con movimiento orgánico.
• Miyagi — Una línea barre 180° de ida y vuelta arrastrando una estela que se desvanece, en CSS puro y animando solo transform. Compacto y elegante para botones e inline.
• Mirage — Flujo continuo de bolas que nacen, crecen al cruzar el centro y se desvanecen fundiéndose entre sí, con efecto gooey por filtro SVG. Para cargas largas en horizontal.
• Metronome — Una bola oscila como el péndulo de un metrónomo arrastrando una estela que se desvanece, en CSS puro. Para esperas con ritmo marcado.
• LineWobble — Barra de progreso indeterminada: un segmento se desliza de extremo a extremo sobre un raíl tenue, en CSS puro. Para cabeceras de página y bordes de panel.
• LineSpinner — El spinner clásico de doce barras radiales que se encienden en cascada, en CSS puro y sin rotación real. Neutro y reconocible: el valor seguro para cualquier interfaz.
• Leapfrog — Tres bolas saltan una sobre otra como en el juego del pídola, en relevo continuo y CSS puro. Para cargas con un guiño juguetón.
• JellyTriangle — Una bola viajera salta entre los vértices de un triángulo y se funde con la que espera en cada esquina, con efecto gooey por filtro SVG. Para esperas cortas con personalidad.
• Jelly — Dos bolas se separan y se funden como gelatina girando de eje en cada ciclo, con efecto gooey por filtro SVG. Para cargas breves con carácter lúdico.
• InfinityLoader — Un segmento de trazo recorre sin fin un lazo con forma de infinito sobre una vía tenue, animando stroke-dashoffset en SVG. Para procesos sin final previsible.
• Hourglass — Reloj de arena que vierte su contenido de una mitad a otra y se voltea al vaciarse, en CSS puro. Para esperas largas donde conviene sugerir que el tiempo avanza.
• Helix — Doce puntos organizados en dos hebras que giran entrelazadas como una doble hélice de ADN, con profundidad simulada por escala y opacidad.
• Hatch — Tres barras que se estiran y encogen recorriendo el perímetro de un cuadrado, dibujando un trazado que se cierra sobre sí mismo.
• Grid — Una malla isométrica de dieciséis puntos recorrida por una ola diagonal, con escala y opacidad graduadas para dar profundidad.
• DotWave — Cuatro puntos que saltan encadenados y hacen que una ola recorra la fila de izquierda a derecha.
• DotStream — Un reguero de puntos que cruza el carril en fila india: cada uno nace, crece al llegar al centro y se apaga al salir.
• DotSpinner — Ocho puntos dispuestos en círculo que crecen y menguan en cascada, dando la sensación de un giro continuo.
• DotPulse — Tres puntos que aparecen y desaparecen por turnos, como el indicador de "está escribiendo" de una app de mensajería.
• ChaoticOrbit — Dos puntos que orbitan sobre un plano que gira a otro ritmo, dibujando una trayectoria hipnótica que nunca se repite igual.
• Cardio — Un trazo de electrocardiograma que se dibuja latido a latido sobre su propia pista tenue y se desvanece al completarla.
• BouncyArc — Un cubo pendular que barre un arco como un metrónomo y se estira al llegar a cada extremo.
• Bouncy — Tres cubos redondeados que saltan escalonados y se aplastan al aterrizar, con un squash & stretch de animación clásica.