Use Webflow Interactions to create a custom preloader and animated loaders.
A preloader — or what some call a loading screen — is the what you see on some sites before the main content of the web page is loaded.
Preloaders can be anything! They can be super simple or animation-laden. Their main purpose is to entertain site visitors while the actual content of the page is still loading in the background.
Some might argue whether you should or shouldn’t use a preloader, however, since you’ve landed on this page, we assume you want to learn how to build one in Webflow. In this lesson, we’ll show you how to make a preloader and two loaders using interactions: the simplest loader ever and an animated loader.
To create this preloader, you'll be using:
If you're not familiar with any of these elements or properties, check out their guides and how to use these tools before you get started with this tutorial.
The preloader is made up of the main preloader container and a loader. To create the main container of the preloader:
To create the simplest loader, just drag in a text block. Doubleclick it and type "loading...". And that's it. That's the basic design.
You can add any element or asset in your preloader container — from animated gifs to videos of animated loaders, to Lottie animations.
If you add gifs or videos, make sure they aren’t too large. You don’t want the preloader to take more time to load than your site. Lottie JSON animation files, on the other hand, are much smaller in size and highly adaptable. Once uploaded to Webflow, they are rendered as SVG animations. SVG files scale better than any other formats without losing any quality, so they render pretty well at any resolution.
If you add animated loaders (gifs or a video), make sure they aren’t too large. You don’t want the preloader to take more time to load than your site.
You can also make animated loaders using Webflow Interactions. Here, we’ll show you how we made this bouncing ball loader.
Now that you’ve created the preloader, you can hide it so you can work with your other elements on the page without having the preloader covering everything. So, select the preloader and set the display setting to none.
The initial state controls what everything looks like when the page first comes up. To make your preloader disappear once the page finishes loading:
And that's setting up a preloading animation!