Fluid Loader

Show Preview
Fluid Loader
Fluid Loader

About Fluid Loader

Give your site a confident first impression. Fluid Loader covers the page in a single bold colour, then a thick, smooth swirl drains away, thinning as it goes. Your site appears through its loops, and the last ribbon slips off through the corner.

Features:

  • Starts as a solid colour from the very first frame, so your page never flashes before the reveal

  • Clean vector shape that stays crisp at any screen size, on desktop and mobile

  • Smooth 60fps animation

  • One colour, fully customisable

  • Adjustable hold time, duration and final thickness

  • Mirror option to exit through the top-left corner instead of the top-right

  • Optional “Wait for load” to keep the colour up until images have loaded (never longer than 2.5s)

  • Locks scrolling while the screen is covered

  • Removes itself when finished, so it never blocks clicks

  • Respects “reduce motion” settings with a simple fade

  • Loop mode for previewing and recording

  • On Complete event to trigger other interactions

How to use:

  1. Drop Fluid Loader onto your page.

  2. Set Position to Fixed, size to 100vw × 100vh, and give it the highest z-index.

  3. Pick your colour and publish. The loader plays in Preview and on your live site.

Tips:

  • Delay your hero animations by about 1s so they play as the colour clears.

  • Turn on Loop to record a demo, then switch it off before publishing.

From Kaisa A

Floating Tiles
Flip Arc Carousel
Soft Heading
FrostedGlass Button

Related Components

Image Pixel Loader
Preloader Pro V1
LoadingSpinner
Sequential Loader