Sophisticated Loader — Smooth loading animations

A refined loading animation with two built-in art directions, switchable with one click.

Editorial

Squares fill a grid cell by cell in a spiral pattern from the center. Clean, mechanical, modular. Grid background, monospace text. Square corners, zero radius.

Soft

Organic blob rings expand outward from a breathing center dot. The rings rotate and deform like water ripples. The center dot follows your cursor and reacts to movement. Animated light beams appear on hover. Rounded, warm, alive.

Both designs share the same property controls:

• Size, speed, grid density or ring count

• Accent color (any color, applied to squares, rings, and center dot)

• Loading text (optional, customizable)

• Background toggle (themed or transparent)

• Design switch (segmented control)

Drop it into any Framer project. Works as a page loader, section transition, or inline loading state. One component, zero dependencies.