On this Webflow lesson we take a look at the home page loader. How to create a website pre-loader in Webflow and how to lottie animations correctly in pre-loader animations using Webflow.
All our project files for you to practice and play with along with some bonus materials.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
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
Coming Soon
Access our premium community including bonus tutorials, project files & weekly resources.
LIFETIME 💎 ACCESS