Building a Pre-Loader in Webflow

okay guys so let's add the loader screen

to our landing page the first thing i

did was i downloaded a

loader animation from loadiefiles.com

i'm going to select the body body section

and i'm going to create a new

container i'm going to use a diff block

for this

i'm going to call this the loader

and inside this load overlay we're going

to have some properties some basic

properties

like we're going to position it absolute

we're going to

actually make that a fixed position and

we're going to make this

size to be a hundred percent by a

hundred percent

because we wanted the entire size of the

of the canvas

and the c index we want it to be very

high number so that it stands

um on top of every other element that we

have

so there's no conflict with other

elements so it's always on the top

and for the background what we're going

to leave it we're going to leave it

completely transparent

but and now that we have this we're

going to just

have a temporary placeholder here so i'm

just going to make this

our temporary background so we know that

this is our

loading overlay screen inside this

we're going to drop in our loti

animation which i already have

and we can scale that loader to hover

the size we'd like so let's say we want

this

to be low t loader

i'm going to call the class loader and

this is going to be

about 70 pixels by 70 pixels

right about there that looks good let's

position this absolute

and we want to center it in the middle

right like that if we preview this we

can see that loader

already playing on its own so the

animation it's looping on its own we can

set those settings

by simply going to the settings and just

adding the loop

over here okay let's make sure that it's

completely centered

so we want to make the margin offset of

that 70 pixels

so we can do 70 divided by 2 and that's

going to be 35.

the idea here is to have the page as

it's loading all the assets

right we have a kind of like a curtain

and so as soon as all the assets are

loaded

we want webflow to reveal the contents

behind and

creating sort of like this waterfall

effect

and so what i want to do is create

multiple layouts or multiple blocks

i'm going to add in here a div block

and i'm going to call this diff block

the load

i'm going to call it curtain

and the curtain i want to have is a

background

gradient so let's go ahead and use our

colors

so that the swatches that we have

already created

we have this gradient like this or just

a linear gradient

i think a linear gradient is fine so i'm

going to select a nice bright color

that goes down to a darker tone so these

two

colors combined makes this beautiful

gradient

so that looks good and now what i'm

going to do

is i'm going to duplicate this the block

four times

so there's four of these and

with the little help of flex i can turn

these

horizontal blocks into vertical columns

so just simply by going to the load

overlay changing the layout to flex

now they're all into columns so let's

say that each one of these is a hundred

percent

now you can see that all the curtains

are expanding

to a hundred percent of that container

if we were to preview this we only see

that loader

but each of these curtains is there as a

block

which is awesome right so let's make

these gradients just a little bit darker

so we can still see

the outline of that loader so just a

little bit darker like that

and then this one we can make this

a little bit darker just like that there

we go now we can see the

outline of that circle i think we can

also

move the gradient so that the darkness

starts to come in a little bit

from the bottom like that and then this

one

we want to tone it down just a little

bit like that there we go

okay that looks good you can see the

loader and then all we have to do now

is make the animation so that when it

finishes loading all these panels go

down

okay the way we do that is we simply go

to the body

select the interactions and on the page

trigger

we're going to select page load

now we get two different actions when

the page starts loading

and when the page finishes loading what

do we want this to do

all right so let's do what happens when

the page finishes

loading and add in animation in this

instance we're going to call this

hide loader so let's click on

the height loader and we're going to

start adding the animation on each

individual block

select curtain and i want that to move

at a starting point i want it to stay

where it is so

the starting point of the y will just be

one

we can make this a percentage if we

wanted to but that gives us a little bit

of a gap here

so just set that to zero and then

the end point of that curtain

is going to be minus

100 and that's actually over here

right below it so if we were to play

this

you can see the animation actually that

negative number is going

up so we want it to go down so let's

just put a hundred percent

and see how that looks that's exactly

what we want

right so we could do this and select all

the class

so what would happen is it would add all

classes and add the same animation but

that's not what we want in this instance

what we want to do is select each

element

and apply that same effect multiple

times

okay so we've made the animation work

just like we want to but now we just

need to offset

by adding a delay so that first

curtain goes without a delay

the second one has a point one delay

the third curtain has a point three

and the fourth is going to have a 0.4

so if we see this together oops there's

one that

are moving at the same time so these two

this one should be 1.1

this one should be 0.2

and this one should be 0.3 so let's try

that again

there we go that's exactly what we want

and just add an interpolation from our

list

to go ease in out so it has a nice

smooth uh transition

all right this is looking good now we

got to select

also the loader right now we don't have

the loader visible

on the screen and that's because we

don't have a c index within the

load overlay we want to make sure that

that's visible at all times

so let's select the loader and add a c

index of

10 okay let's try that again

now we just need to get rid of that

loader when we

finished having that animation we go

back to the page

animation to hide the loader

we select our loader and we're going to

say

opacity the state of initial is going to

be 100 of course

and then right at the end we want this

to go away

to zero percent just like that

we could do it with the previous action

so it's instead like this

it hits it goes into this block so along

with them

it goes away just like that great

now let's take a look awesome now the

problem here is that we've animated

all those elements inside but the actual

overlay is still visible

meaning that i cannot click any button

because that overlay is on top of

everything so the last step is to get

rid of the entire

diff block when that animation ends

so let's jump into our animation again

and what we're going to do is select

this time the load overlay

and we're going to add a property here

called hide and show

so the first state we want this to be

showing with a display of flex

and then at the end we want the actual

element to

hide so simply by clicking hide

what's going to happen is this is going

to get rid of entirely that block

okay so we have that and then it goes

away you have that

and then it goes away and all it's left

to do is get rid of that

transparent background that we've added

on our

load overlay let's remove this

and make sure that it's transparent

like just by clicking that one there we

go

boom now all the elements behind it are

available for us to interact with

pretty cool

‍