---
title: "Bubble Loader — Free Framer component · Best of Framer"
description: "Free Framer component · by Muhmad Hmdo · Loaders. Animated Bubble Cluster Loader"
canonical: "https://framer.elliotli.dev/component/bubble-loader"
---

[Home](/)/[Components](/components)/[Loaders](/components/category/loaders)/Bubble Loader

# Bubble Loader

Animated Bubble Cluster Loader

[View on Framer](https://framer.com/marketplace/components/bubble-loader/?via=elliot-li)

![Bubble Loader preview image 1](https://framer.elliotli.dev/og/component/bubble-loader/de732bd3ffa532e4/1600x1200.jpg)

## Summary

Animated Bubble Cluster Loader

## Description

## 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
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-fk0c17x0-mVRkKcX0NZS9TQu8lA9Bvdc9Ilhve2)

### 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
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-fk0c17x0-t3KKEzxiULzEqJSMgmX4cxWInROU0P)

### 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](https://sbarah.com)

Free Support: [framer@muhmad.me](mailto:framer@muhmad.me)

## Rank history [How rankings work →](/terms#rankings)

-   All · #4951

## Details

- **Author**: Muhmad Hmdo
- **Published**: 2026-05-11
- **Updated**: 2026-05-11
- **Added**: 2026-04-22
- **Categories**: Loaders

## More like this

-   [Preloader Pro V4](/component/preloader-pro-v4) — Interface Studio · $12 — Your Website, Beautifully Unveiled
-   [Circleloader](/component/circleloader) — gustavwf · $5 — Circular logo reveal loader.
-   [AI Text Loading](/component/ai-text-loading) — Syauqizaidan Khairan Khalaf · $5 — Thinking phrases with a shimmer
-   [Preloader Pro V3](/component/preloader-pro-v3) — Interface Studio · $10 — Set the Stage Before the Story