Bubble Loader

Bubble Cluster Loader

An animated SVG cluster of circular bubbles that fill in a smooth wave pattern from top to bottom, with ripple effects and customizable icons inside each bubble.

Wave Animation

• Bubbles fill in a top-to-bottom wave with configurable delays per bubble and per row

• Adjustable hold duration before the cycle resets

• Speed multiplier to control overall animation tempo

Icon Shapes

Choose from 9 built-in presets or create your own:

• Check: classic checkmark

• Star: 5-point star

• Heart: filled heart

• Circle: outline circle

• Cross: X mark

• Dot: filled dot

• Arrow: directional arrow

• Diamond: filled diamond

• Custom: Path paste any SVG path data

• Raw: SVG paste full SVG markup (path, circle, rect, polygon, etc.) colors auto-replace to match your theme

Mouse Follow

• Bubbles shift toward the cursor with physics-based smoothing

• Intensity controls how strongly bubbles are pulled (0.05–2)

• Smoothing controls easing speed (0.02 = silk smooth, 0.5 = snappy)

• Full-area coverage works across the entire component regardless of size

• Graceful ease-back to original positions when cursor leaves

Bubble Style

• Adjustable radius, stroke width, dash pattern, and opacity

• Fill opacity separate from stroke for layered effects

Rings

• Define up to 8 concentric rings with custom bubble count and distance

• Center bubble always included

Ripple Effects

• Expanding ripple on each bubble fill

• Configurable duration

Colors

• Background, ink (question mark + ripple), fill, stroke, and icon color all separately controllable

Performance

• Entirely SVG-based, no canvas or DOM-heavy patterns

• IntersectionObserver pauses animation when out of viewport

• Visibility API pauses when tab is hidden

• Debounced resize handling to prevent animation glitches

Layout

• Fixed layout, intrinsic size 320×320

• Resizable to any dimension, bubbles auto-distribute

• Configurable padding

More: sbarah.com

Free Support: framer@muhmad.me