Navbar Preloader

Navbar Preloader — Framer Component

Every other preloader ends. This one hands over.

Your logo sits in the middle of a black screen and fills like a glass of water — a real surface, two waves running at different speeds, settling rather than sloshing as it reaches the top. At a hundred percent it flies out of the centre and lands exactly on your navbar logo: same position, same size, same crop. The real logo takes over and the loading screen slides away behind it. The wait turns out to have been your site arriving.

Setting it up is one rename. Drop the component at the root of your page, name your navbar logo layer to match the Navbar Logo Layer control, and upload your logo. If that layer is ever missing, the loader degrades to a clean fade instead of breaking the page.

What's inside:

• The handoff — the logo flies into your navbar's real logo and hands over

• 3 fills — Water (live surface), Wipe, or Fade

• A second logo that cross-fades mid-flight, for navbars in a different colour

• A thin progress rule, two swapping labels, an optional percentage — each switchable

• 3 exits — slides up, splits apart, or fades

• Load time, hold, and flight time set independently

• Shows once per visit

• Respects prefers-reduced-motion

• 19 controls, no external libraries

Licence: one price, unlimited websites, including client work.