Build a custom preloader - Webflow interactions & animations tutorial

Learn how to create a preloader using Webflow interactions. In this lesson:

(1) 0:36 — Designing the preloader
(2) 1:40 — Setting the initial state of the preloader
(3) 2:38 — Hiding the preloader once the page loads

Steps in the video:
00:00 - Introduction
00:36 - Design
01:40 - Initial state
02:38 - Animation
-------

[justynaUrsa]

Wanted to take a moment to thank you and the team at Webflow for teaching me to use your tool and in short teaching me to be a Web Designer! Amazing, amazing tutorials. I've watched many a million times over because they are jam packed with helpful information. Thank you, thank you Webflow!!

This type of preloader is not really good. i built the web quite heavy, and that hide and show make the preloader flicker, start the interactions (include hide and show) a bit AFTER the main content load. The solution is do not use hide and show, but that make editing is hard so far.
If webflow can provide some sort of priority of load stuff then things should be awesome.

[francescob.]

this doesn't work for me. I have animations in the page that make stuff fade in and appear, but even with the preloader I can see the page flashing before it loads the animations.

[masterpeacebox]

your website has subtitles that says anatomy rather than anathema, just a heads up :)

[olaidemichael]

Hello....i followed the video...but is there i can control the preloader that when the preloader animation page cannot be scrolled.😊

[MilanDrazic]

how to load preloader only first time visiting the page not always when click the home button?

[georgieandrews]

Hi there, I have done it all according to your instructions, however it isnt working when i publish my website, is there any chance you could help?