How do I use a liquid loading animation in Framer or Webflow?

Copy the embed on this page and paste it into an Embed block: Insert, then Embed in Framer; Add, then Embed in Webflow. A vanilla HTML and CSS version is included as well, so the same liquid loader runs on any site with no plugin and no build step.

Is this a Lottie file or a GIF?

Neither. Each liquid loader is a few kilobytes of self-contained HTML, CSS and canvas JavaScript. Unlike a GIF or MP4 it stays crisp at any size, and unlike Lottie it needs no player library, so nothing heavy loads before your loader does.

How is the liquid effect drawn?

The merging, dividing bodies are metaballs: implicit surfaces traced as one continuous hairline, the same technique behind the classic gooey effect, drawn as line work instead of a blurred filter. Every loop is seamless, with no restart point.

Can I change the colour?

Yes. Each loader draws in one accent colour, settable to any hex on this page before you copy. The default follows your page's text colour, so it works on light and dark themes without adjustment.

What does the $29 cover?

The whole drop under a perpetual commercial licence: all twelve liquid loading animations for client work and your own projects, no per-site fees, no subscription, nothing that expires.

DROP 19 / LIQUID / 12 LOADERS

Liquid.

Twelve liquids: smooth bodies that merge, split and morph — one continuous metaball contour.

A liquid loading animation holds attention the way still water does: one smooth body, always moving, never busy. The twelve loaders in this drop are drawn as a single metaball contour that merges, splits and reforms, seamless on the loop and a few kilobytes on the page. Set the accent, copy the embed, and the wait feels considered.

Buy Liquid$29

INCLUDES 12 LOADERS / HTML + CSS + CANVAS / FRAMER + WEBFLOW EMBED / COMMERCIAL LICENSE

DROP 19 / LIQUID / CONCEPT INDEX

DROP 19 / LIQUID / SPECIMEN GRID

Side by side.

Every loader across light and dark. Pick an accent and watch it flow through all of them at once — the picker writes a single CSS variable each canvas reads live. The same mechanic ships in the buyer zip.

ACCENT

#

BG

01 / Decant

02 / Transit

03 / Divide

04 / Metronome

05 / Duet

06 / Rainfall

07 / Spin-off

08 / Almost

09 / Pure breath

10 / Inner echo

11 / Tidal pair

12 / Mercury idle

Drop 19 / Liquid / questions

Asked often, answered plainly.

How do I use a liquid loading animation in Framer or Webflow?: Copy the embed on this page and paste it into an Embed block: Insert, then Embed in Framer; Add, then Embed in Webflow. A vanilla HTML and CSS version is included as well, so the same liquid loader runs on any site with no plugin and no build step.
Is this a Lottie file or a GIF?: Neither. Each liquid loader is a few kilobytes of self-contained HTML, CSS and canvas JavaScript. Unlike a GIF or MP4 it stays crisp at any size, and unlike Lottie it needs no player library, so nothing heavy loads before your loader does.
How is the liquid effect drawn?: The merging, dividing bodies are metaballs: implicit surfaces traced as one continuous hairline, the same technique behind the classic gooey effect, drawn as line work instead of a blurred filter. Every loop is seamless, with no restart point.
Can I change the colour?: Yes. Each loader draws in one accent colour, settable to any hex on this page before you copy. The default follows your page's text colour, so it works on light and dark themes without adjustment.
What does the $29 cover?: The whole drop under a perpetual commercial licence: all twelve liquid loading animations for client work and your own projects, no per-site fees, no subscription, nothing that expires.