Build a custom preloader - Webflow interactions & animations tutorial

before we get into making a preloader which is what we see here let's first talk about the most important thing should you use a pre loading screen of any type some people say yes others say never the answer is it's up to you page loads can go pretty fast your preloader might look ridiculous if it's only up for a quarter of a second on the other hand maybe you've designed a page that takes several seconds before it's presentable regardless if you want to set up a pre loader here's a quick way to do it one we'll design our pre loader - we'll set our initial state and three we'll make sure the preloader goes away once the page is loaded number one we'll drag in a div block from the ad panel and we'll drag it right into the page body mr. block will be the main container for our pre loader so we'll create a class and name it free loader let's make some adjustments first will enable flexbox and we'll justify and align its children to the center second we'll adjust the positioning setting the position to fixed we'll make sure to select full so it fills up the whole viewport and we'll set the z-index to some obscenely high number this means it'll appear on top of all other elements finally let's set a background color we can choose a color from the color picker right here and of course we can drag in anything anything can show up on page load if it's a huge gif for a video or something it'll probably slow down the page load and serve as an anatomy of the whole spirit of the pre loading thing so it's up to you we've just dragged in a text block and we wrote loading and that's it that's the basic design the bouncing ball the one from the beginning is taught in the full guide on web player University so check out the link to that in the description and feel free to skip over to that if you want to build it let's set our initial state now the first thing we want to do after our design is done we've simply put the word loading here for now is set the display in the style panel here to none why because we want to be able to edit on the page without a giant div block covering our work now notice the preloader div block is still selected and we'll go over to interactions where we can add a trigger we'll make sure the trigger is the page loading and we have two options here we can set it when the page starts loading or we can set it when the page finishes loading we'll want to go with the second option let's create a new timed animation here and let's name it we're giving a name to this animation and this is where we can set our initial state even though we set the display to none in the style panel we can set our display back to flex under hide show and we'll simply choose flex this makes it visible again and to make it the initial state we just flick the switch that's it part to complete and now for the final part the initial state controls what everything looks like when the page first comes up we're going to make our preloader disappear once the page finishes loading we're going to do this in two steps one we'll add a new point a new action that sets the opacity to 0% we want this to occur fairly quickly so let's change the duration to drop that a bit and two after that we want to set our display setting to none after fading out after the opacity hits zero we'll hide it we'll set our display setting to none now if we want to ensure that the preloader shows up for a set amount of time a minimum we can go back to the first action the opacity change and we can set it to occur after say half a second that means even after the page loads it'll hold for a half second before starting to disappear and that's it we create our design set our initial state and animate it out we do all this on page load when the page finishes loading that's setting up a pre loading animation

Channel: Webflow

Views: 108,633

Keywords: web design, webflow, responsive web design, graphic design, web development, cms, content management system

Id: VthMa3jXjJ4

Length: 3min 37sec (217 seconds)

Published: Tue Jul 03 2018