How to add a custom preloader in Framer

A preloader is the short piece of motion a site plays while the first page loads. Used well, it covers the half second before your type and images arrive, and sets a tone before anyone reads a word. Used badly, it reappears on every page change and quietly trains people to leave.

We build loading animations for a living, so we will start with the part most guides bury: a preloader should run once, on first load. Not on every click through your site. Get that wrong and a tasteful three-second intro becomes a three-second tax on every navigation.

The short version

1. Make a preloader component with two variants: one for the loading state, one for loaded.
2. Animate the change with a reveal, a draw-on or a wipe, not a stock spinner.
3. Connect the variants so the change plays automatically on load, using Framer's appear animation.
4. Add the component to your page layout once, so it does not fire on internal navigation.
5. Keep it under two seconds, and if it loops, make the loop close without a visible jump.

That is the whole job. The rest of this page is the detail behind each step, and the motion decisions that separate a preloader people enjoy from one they sit through.

The no-code method: variants and an appear animation

You do not need code for this. Framer's variants and its appear animation cover the standard case. Framer renames panels between versions, so for the current click-by-click follow Framer University's loading-animation tutorial or Framer's own preloader guidelines. The method and the judgment here hold regardless of where a button has moved.

Build the component. Create a component for your preloader and give it two variants. Name them for what they are, say Loading and Loaded, or Start and Arrive. The first holds the full-screen state a visitor sees the instant the page opens: your background, and whatever mark or shape will animate. The second is the resolved state, usually the preloader faded away, revealing the page.

Animate the difference between them. Put your motion on the first variant and let Framer interpolate to the second. A logo that draws itself on. A panel that wipes away to reveal the hero. Framer tweens the properties that differ between the two variants, so the animation is simply the gap you design between Loading and Loaded.

Trigger it on load. Apply Framer's appear animation, the effect that runs when an element first loads, and point it at the move from the first variant to the second. Look for the on-load or appear option in the interactions panel; the label shifts between versions, but the behaviour is the same. It needs no hover and no click, and plays the moment the page opens.

Set the transition. Open the transition controls and choose the easing and duration. This is where most preloaders are won or lost, and we will come back to it. For now, a gentle ease and a duration around 0.8 to 1.6 seconds is a safe starting point.

Preview the page. The preloader should play once and hand off to your content. If it does, you are most of the way there. One trap remains.

The mistake almost everyone makes: run it once

Here is the moment it goes wrong. You build the preloader on your home page, it looks great, you publish. Then you click to your work page, and it plays again. And again on the about page. A visitor who moves through four pages watches your intro four times.

The fix is placement. In Framer, anything you want to persist across pages belongs in a layout, not on an individual page. Add the preloader to the page layout your pages share, and Framer treats it as part of the frame rather than the content. It shows on the first load of the site and then stays out of the way as people move around.

If you are not using a shared layout, the lighter touch is to run the Appear animation on the entry page alone and leave the other pages clean. Framer's own template guidance is blunt about this: a preloader belongs to the first load, and showing it on every navigation is the failure mode to avoid.

Test it the way a visitor moves. Land on the home page, watch the preloader, then click through three or four internal links. You should see it exactly once.

What actually makes a preloader good

This is the part the component shops skip, and it is the part that decides whether the motion reads as considered or cheap.

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, the actual asset count. 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. If your page loads in 400 milliseconds, do not hold a two-second animation in front of it. Let it go when the page is ready.

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.

None of this needs more than the variants and easing Framer already gives you. It needs the restraint to keep it short, and the patience to get the loop and the easing right.

The faster path: drop in a ready-made loader

Building the motion from scratch is satisfying, and it is also time. If you would rather not draw and tune a loop yourself, a ready-made loader drops into a Framer component 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 demo you embed in a Framer code component. You bring the placement and the run-once layout from this guide; the motion is handled.

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

Frequently asked questions

After an in-page loader rather than a first-load cover? See how to add a loading animation in Framer. Building in Webflow instead? See how to add a custom preloader in Webflow. More at all guides.