---
title: "Ondula Loader — Framer component · Best of Framer"
description: "$14.00 · Framer component · by Jane · Loaders. A cinematic ripple loader"
canonical: "https://framer.elliotli.dev/component/ondula-loader"
---

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

# Ondula Loader

A cinematic ripple loader

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

![Ondula Loader preview image 1](https://framer.elliotli.dev/og/component/ondula-loader/8da96bf02fcc66fa/1600x1200.jpg)

## Summary

A cinematic ripple loader

## Description

Ripple rings expand from centre, your logo rises, and up to 6 product images orbit in a smooth merry-go-round. Drop in, customise, publish.

**Full Description**

Ondula is a full-screen page loader built for brands that care about every detail including the two seconds before your page appears.

Three colour-customisable ripple rings expand outward in a staggered sequence, clearing the screen before your logo rises from below. If you upload product images, they orbit the logo in a smooth, continuous merry-go-round fading in with the logo and fading out before it flies offscreen. Then the overlay dissolves and your page is revealed.

The entire animation runs on a single requestAnimationFrame loop with direct DOM writes no React re-renders during playback, no jank, no dropped frames.

**What's inside**

**Ripple sequence** Three rings expand from the centre with a staggered offset. Each ring fades out as it grows, clearing the screen cleanly before the logo appears. Ring colours are individually controlled.

**Logo reveal** Your logo rises from below the centre, rests, then exits upward as the loader closes. Upload any image SVG, PNG, WebP and set exact width and height.

**Orbital product showcase** _(optional)_ Upload 1 to 6 images and they distribute themselves evenly around a circle — 90° apart for 4 images, 72° for 5, 60° for 6. The orbit rotates continuously at a speed you control. No images uploaded? The loader runs cleanly with just the logo.

**Canvas Preview Mode** A toggle dims the loader to 12% opacity so you can keep working on your canvas without the loader covering your page. Flip it off to test the full animation in Framer Preview.

For assistance, [email me.](mailto:jane.framer.expert@gmail.com)

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

-   All · #5606

## Details

- **Author**: Jane
- **Price**: $14.00
- **Published**: 2026-07-06
- **Updated**: 2026-07-07
- **Added**: 2026-07-06
- **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