How to add a custom preloader in Webflow

A preloader is the full-screen animation a site plays while a page loads. In Webflow you build it as a fixed div that covers the page, then hide it with a page-load interaction once everything has arrived. The part most tutorials skip: by default it plays on every page of your site, on every load, which gets old fast.

We build loading animations for a living, so we will be straight about the trade-offs as we go, starting with the run-once problem, which is sharper in Webflow than in Framer.

The short version

1. Add a full-screen div, give it the class preloader, and fix it over the viewport.
2. Put your loading animation inside it.
3. In the Interactions panel, add a Page Load trigger that fades the preloader out and hides it when the page finishes loading.
4. To show it once per visit rather than on every page, gate it with a short sessionStorage snippet.
5. Keep it under two seconds, ease the motion, and make any loop close without a visible jump.

Steps one to three are no-code, inside Webflow's Interactions panel. Step four is a few lines of custom code, and it is the one that separates a polished preloader from an annoying one.

The method: a fixed div and a page-load interaction

Webflow's interface is stable enough to follow along, and Webflow University's preloader lesson is the canonical click-by-click. The steps below mirror it; the run-once fix in the next section is the part it leaves out.

Build the cover. Drag a div block to the very top of the body and give it the class preloader. Set its position to fixed, full width and height so it covers the viewport, and a high z-index so it sits over everything. Turn on flexbox and centre its children, so whatever you put inside lands in the middle. The background is usually your brand colour. Inside it, place your motion: a Lottie, an SVG, or a div you animate.

Add the page-load interaction. With the preloader div selected, open the Interactions panel and add a trigger of Page trigger, then Page load, set to when the page finishes loading. This fires once the page is ready, which is exactly when you want the preloader to leave.

Animate it out. Create a new timed animation. Set the initial state so the preloader starts visible (display flex, opacity 100 percent), then add a step that takes opacity to 0 and, at the end of that step, sets display to none so the hidden preloader stops catching clicks. Ease the fade rather than cutting it.

Hold it only if you need to. If your page loads almost instantly the preloader can flash for a frame and look broken. A small delay on the first action, around half a second, smooths that. Do not reach past a second of forced wait, for the reason in the next section but one.

Preview the page. The preloader should cover the load, fade, and hand off. Then visit a second page, and you will meet the trap.

The gotcha: show it once, not on every page

Webflow sites are multi-page, and every click to a new page is a full page load. So a standard preloader plays again on every page someone visits. On the home page, fine. By the fourth page, tiring. This is the single biggest difference from Framer, where client-side navigation means a preloader in the layout shows once on its own.

The fix is a short snippet that remembers the visitor has already seen it. Add this before the closing body tag, in your site or page custom code:

<script>
  if (sessionStorage.getItem("preloaded")) {
    document.querySelector(".preloader").style.display = "none";
  } else {
    sessionStorage.setItem("preloaded", "true");
  }
</script>

On the first page of a visit the flag is unset, so the preloader runs and the flag is set. On every page after, the flag is found and the preloader is hidden straight away. Close the tab or come back tomorrow and it shows once again. Swap sessionStorage for localStorage if you want it to show only once ever per browser, though once per visit is the friendlier default.

One thing to check on a second page: the preloader should not appear at all. If it flashes for an instant, that is your page-load interaction re-showing the div before the snippet hides it, not the snippet failing. Keep the script just before the closing body tag so it runs as the page settles, and keep the interaction's initial state simple.

What actually makes a preloader good

This is the part the cloneable shops skip, and it is the part that decides whether the motion reads as considered or cheap. None of it is Webflow-specific; it is just how motion earns its place.

Do not fake the load. A progress bar that crawls to 90 percent and stalls, or a counter spinning to 100, is theatre. It tells a story about loading that has nothing to do with the real network, and people recognise the lie. If you must reference progress, tie it to something real. Otherwise drop the pretence and show motion that is simply good to watch for a beat.

Keep it short. A preloader is a courtesy, not a feature. Under two seconds is the zone where it covers the genuine load and then leaves. Past that, you are charging attention you did not earn, which is also why the optional hold above should stay small. If your page is ready, let the preloader go.

Make the loop close. If your preloader repeats while it waits, the repeat has to be invisible. The last frame must line up with the first, so the motion comes round again with no reset and no stutter. A loop with a visible seam is the most common tell of a rushed loader. We build every loop so the frame at the end of the cycle is identical to the frame at the start, which is the only way a wait of unknown length stays smooth.

Ease everything. Linear motion looks mechanical. Real things accelerate and settle. A shape that eases in, holds, and eases out feels designed; a shape that moves at a constant speed feels like a placeholder. Avoid speed ramps and abrupt stops, both read as broken rather than deliberate.

Let it mean something. The preloaders people remember are tied to the work: a photography site that opens with a shutter, an architecture portfolio where a line drawing resolves into a finished render. The motion does not have to be literal, but a loader that could belong to any site usually belongs to none.

The faster path: drop in a ready-made loader

Building and tuning the motion yourself is satisfying, and it is also time. If you would rather not draw a loop and ease it by hand, a ready-made loader drops into a Webflow Embed element in a few minutes and arrives with the easing and the clean loop already done.

That is what we make. Imagination Studio sells themed drops of hand-built loading animations for Framer and Webflow: cohesive sets where every loader shares one design language, with a perpetual licence at $29 a drop. The Spectrum set is radial audio-visualiser motion, the Liquid set is metaball bodies that merge and split, and each ships as a self-contained HTML, CSS and JavaScript demo you paste into an Embed inside your preloader div. You bring the interaction and the run-once snippet from this guide; the motion is handled.

Either way the principles hold. A bought loader still needs to show once, still needs to be short, and still does better tied to your work than dropped in generic.

Frequently asked questions

Building in Framer instead? See how to add a custom preloader in Framer or how to add a loading animation in Framer. More at all guides.