---
title: "BouncingDot — Free Framer component · Best of Framer"
description: "Free Framer component · by Hamim Reza · Loaders. Physics loader with glow & ripple fx"
canonical: "https://framer.elliotli.dev/component/bouncingdot"
---

[Home](/)/[Components](/components)/[Loaders](/components/category/loaders)/BouncingDot

# BouncingDot

Physics loader with glow & ripple fx

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

![BouncingDot preview image 1](https://framer.elliotli.dev/og/component/bouncingdot/1671dd99559c2cb4/1600x1200.jpg)

## Summary

Physics loader with glow & ripple fx

## Description

Animated loader with gravity physics, squash and stretch, glow halos, impact ripples and dynamic shadows. Built for loading screens and transitions that need more than a basic spinner.

## Features

-   Gravity physics with cubic-bezier easing
    
-   Squash and stretch rubber morphing on impact and flight
    
-   Glow halo with gradient color support per dot
    
-   Impact ripple shockwave on ground contact
    
-   Dynamic shadow scales with dot height
    
-   Staggered 0.15s timing for natural wave rhythm
    
-   Toggle ripple and shadow on or off independently
    
-   Up to 8 dots · GPU accelerated · No dependencies
    

## Property Controls

**Layout** — dot count, size, spacing

**Animation** — bounce height, duration

**Toggles** — show ripple, show shadow

**Colors** — background, dot gradient start/end, glow, ripple, shadow

## Technical Details

-   CSS keyframes with cubic-bezier easing
    
-   willChange transform for GPU acceleration
    
-   Independent animation tracks for bounce, morph, shadow and ripple
    
-   startTransition for React 18 performance
    

## Use Cases

Loading screens · Splash pages · Processing indicators · Transition effects · Status indicators · Brand animations · Decorative sections

**SEO Keywords**

framer loading animation · framer bouncing dots · framer loader component · framer dot animation · framer loading dots · framer physics animation · framer bounce animation · framer loading spinner · framer animated loader · framer code component

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

-   All · #6012

## Details

- **Author**: Hamim Reza
- **Published**: 2026-03-09
- **Updated**: 2026-03-09
- **Added**: 2026-03-01
- **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