How to Build a Custom Webflow Preloader (No Code & No Flicker)

If you want to make your website feel truly premium, high-end, and bespoke, a custom preloader is one of the best ways to do it. It creates a sense of tease and anticipation—which is why you see them heavily used in luxury, architectural, and construction industry websites.

‍

In this tutorial, we are going to build a multi-stage, custom branded preloader in Webflow. We’ll cover the exact layout structures, timeline interactions, and a critical custom code snippet that prevents your actual website from "flickering" before the preloader loads.

‍

By the end of this guide, you’ll have the exact framework to build any type of preloader layout you can imagine. Let’s dive in.

Step 1: Building the Preloader Layout Structure

Before jumping into interactions, we need to build a robust structure in the Navigator.

1. Add the Preloader Wrapper: Drop a Div Block directly underneath your Body tag and class it "preloader".
2. Set the Position: Change the position from Static to Fixed. Hit Full to cover the entire screen.
3. Z-Index Mastery: Give it a massive Z-index (like 99999) to ensure it sits safely on top of every other element on your site.
4. Sizing & Background: Set the width to 100%, the height to 100VH (Viewport Height), and give it a solid background color.
5. Flex Center: Change the display to Flex, select Vertical, and center the alignment so all your assets stack beautifully.

Adding the Assets

For this multi-stage preview, we’ll stack three layers in the exact same center spot:

• Asset 1 (The Brand Logo): Add an Image element with your primary logo. Set its position to Absolute so it anchors to the center and ignores the default layout flow.
• Asset 2 (The Brand Typography): Add your text blocks (like "Webflow" and "Wannabe"). Give them individual combo classes like "left" and "right" so we can animate them in from opposite sides of the screen.
• Asset 3 (The Secondary Visual/Headshot): Add your secondary graphic or headshot image. Set it to Absolute, apply fixed dimensions, and a 50% radius for a clean circular look.

Pro Tip: Temporarily set elements to Display: None while designing so you can clearly see and style the layers underneath them. Just remember to turn them back on before animating!

Step 2: Configuring the Page Load Interactions

With the assets in place, click on the Interactions Panel and create a Page Trigger for Page Load.

1. Set the Initial States

To ensure a smooth transition, we must hide the elements before the animation timeline starts playing:

• Select your primary logo and headshot images, add Opacity, change the target to Class, and set the initial state to 0%.
• Select your typography, add a Move action, change the target to Class, and move the left text to -100VW and the right text to 100VW so they sit entirely off-screen.

2. Build the Animation Timeline

Now, orchestrate your elements sequentially along the timeline:

• Stage 1 (The Logo Fade): Select your primary logo, fade Opacity to 100% over 1 second, hold it, then fade it back to 0%.
• Stage 2 (The Text Slide-In): Target your left and right text classes and add a Move action back to 0VW simultaneously. Change the easing from linear to Ease In to give the animation a smooth, premium feel. After a brief delay, fade their opacities to 0%.
• Stage 3 (The Secondary Reveal): Target your headshot image and fade Opacity to 100%.
• Stage 4 (The Grand Exit): Finally, select the primary "preloader" wrapper element and fade its overall Opacity to 0% over 1.2 seconds with an Out Quart transition.

Step 3: Eliminating the Preloader "Flicker" with Custom Code

A common glitch web developers face is a "flicker" where the actual website content flashes for a split second before the preloader interaction triggers.

To fix this properly, we want to set our preloader wrapper to Display: None directly in the Webflow styles panel so we can easily design our site. Then, we write a tiny snippet of CSS inside the page's head tag. Because the head tag parses before the body, it forces the preloader to render instantly upon loading.

‍

Go to your Page Settings, scroll down to the Inside head tag section, and paste the following code:

‍

(Style Open Tag).preloader {display: flex !important;}(Style Close Tag)

‍

Note: Ensure the class name matches your wrapper exactly (lowercase preloader). Once you publish, Webflow’s interactions will smoothly override this code and handle the exit sequence seamlessly.

Step 4: Making it Responsive Across Breakpoints

Using viewport units (VW and VH) for sizing layout fonts ensures that your preloader elements naturally scale down beautifully on smaller screens.

Switch over to Tablet and Mobile views to test your composition. If your text blocks feel a little too restricted on mobile portrait, simply adjust the font size to a slightly larger VW value to optimize readability across all device layouts.

Ready to Master Webflow Properly?

If you want to stop guessing and start building high-end, high-converting websites, check out my comprehensive training programs:

• The Complete Webflow Masterclass – Master web fundamentals, clean layouts, custom CMS architecture, and premium interactions.
• The Freelance Accelerator Course – Learn the exact business systems, proposal workflows, and client-handoff methods I use as a verified Fiverr Pro.

Make sure to subscribe to the Derek Siu YouTube Channel for weekly web development tutorials, and leave a comment if this guide helped you fix your preloader flicker!