Péndulo de Newton

Cinco bolas colgadas donde la primera y la última se balancean por turnos.

Ajustes

Color principal#64748b

Color secundario#e2e8f0

Tamaño16px

Velocidad1x

Código

index.html

<div class="uv-lnc" role="status"><span class="sr">Cargando</span><span class="bar"></span><span class="p"><i></i></span><span class="p"><i></i></span><span class="p"><i></i></span><span class="p"><i></i></span><span class="p"><i></i></span></div>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Más en Loaders

Ver todos: Loaders

Spinner circular

LoadersReact + Motion

Puntos rebotando

LoadersReact + Motion

Barra de progreso indeterminada

LoadersReact + Motion

Skeleton de tarjeta

LoadersReact + Motion

Cuadrado que se vuelve círculo

LoadersHTML + CSS

Cuadrados que cambian de sitio

LoadersHTML + CSS

Cubo 3D

LoadersHTML + CSS

Triángulo que se dibuja

LoadersHTML + CSS

Dónde usarlo

El juguete de escritorio que todo el mundo reconoce es un loader tranquilo y satisfactorio para herramientas financieras, clases de física, apps de productividad y paneles de oficina. Una barra sujeta cinco hilos con bolas brillantes; las de los extremos salen y vuelven por turnos con una curva que imita la inercia, mientras las del medio no se mueven.

Las bolas usan un degradado radial con aspecto metálico hecho con tus dos colores. La velocidad cambia el ritmo del balanceo y todo son transformaciones CSS que van fluidas en cualquier dispositivo.