Navbar Preloader — Framer code component

Components — Templates — Agent Kit

Framer code component

The loader ends by becoming your navbar

The logo fills like a glass of water, settles as it reaches the brim, then flies into its real place in your navbar and hands over.

Flies into your navbar

Any logo fills

Shown once a visit

Reduced-motion safe

The loader

Reload this page to watch it

Everything under the overlay is a normal Framer page. The card below is the loader frozen part way through. It runs full screen when the page loads.

On the canvas this is a preview card. On the live page it covers the viewport, then leaves nothing behind.

Setup

Three steps, no code

Drop it in, point it at your navbar logo layer, upload your logo. If the layer is not found it falls back to a clean fade, so it can never break a page.

01 — Drop it in

Place the component at the root of your page, beside your content rather than inside it.

02 — Name the layer

Rename your navbar logo layer to match the Navbar Logo Layer control. That is the whole wiring.

03 — Upload your logo

An SVG fills most crisply. Add a second, navbar-coloured version if your navbar is a different colour.

Properties

Everything is a property

Nineteen controls, grouped so the panel only shows what the current fill and options use.

The handoff

Flies the logo into your navbar and hands over to the real one, which stays hidden until it lands.

Water fill

The logo fills like a glass. The surface is live, with two waves running at different speeds.

It settles

The ripple eases off as it nears the top, so the water comes to rest instead of sloshing.

Rule and label

A thin rule tracks the fill, with a label and the percentage beneath it. The label swaps part way through, and either can be switched off.

Or keep it flat

Switch the fill to a plain wipe or a fade if the water is not for this brand.

Second logo

Cross-fades to a navbar-coloured version as it travels, so the colour change happens mid flight.

Timing

Load time and flight time, each set on its own. The hold at full, so the surface can settle, is built in.

Reduced motion

Fills, holds and fades, with no flight, for visitors who ask for less movement.

Safe by default

If the navbar layer is missing it fades out instead, and the real logo is always put back.

Navbar Preloader

One code component — no libraries — ends in your navbar