Bubble Loader

Animated Bubble Cluster 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

Animated Bubble Cluster Loader