♾️ Infinite Animations

Continuously looping animations for loaders, ambient effects, and ongoing feedback. These animations run forever.

1. Spinning Loader

Classic loading spinner.

						animation:

						  spin 1s linear infinite;

Pulsing heart animation.

❤️

						animation:

						  heartbeat 1.5s

						  ease-in-out infinite;

Smooth floating effect.

						animation:

						  float 3s

						  ease-in-out infinite;

Zen-like breathing circle.

						animation:

						  breathe 2.5s

						  ease-in-out infinite;

Staggered dot animation.

						.dot:nth-child(n) {

						  animation-delay: calc(n * 0.2s);

						}

Rotating group of elements.

						animation:

						  rotateSquares 3s

						  linear infinite;

Skeleton loading shimmer effect.

						background:

						  linear-gradient(...);

						animation:

						  shimmer 2s linear infinite;

Expanding rings like a radar.

						animation:

						  radarPulse 2s

						  ease-out infinite;

						animation-delay: 0.5s;

Use animation-iteration-count: infinite to loop animations indefinitely
Performance: Prefer transform and opacity for smooth 60fps
Stagger delays: Use animation-delay with nth-child() for sequenced effects
Timing functions: linear for constant speed, ease-in-out for organic motion
Accessibility: Always provide pause controls or respect prefers-reduced-motion