Need help to create a Page Loader using Interactions

Design help Animations & Interactions
1

Hey guys, I was directed here to create a loader. I followed the steps but get nothing. Noob I guess. Can someone paste the code the goes ont he custom code page. Just to make it simple for us green horns.

2

It would be nice to have a write up… I can’t seem to get it to load. The video lost me when he seems to make another animation of the gif, not sure if he is changing it or just making another one like a opacity.

8

Hi @cgmindd, I am creating an example to help show how to do this :slight_smile: Stay tuned, it is coming shortly :slight_smile:

9

Hi @cgmindd, I made a very simple page loader, which shows how to set this up using only interactions.

https://webflow.com/website/example-page-loader

The interaction is on the Loader Parent div. Note the styling on the following elements:

  1. Body: height 100%

  2. Loader Parent

478Ă—1772 105 KB

  1. Loader

482Ă—1312 83.3 KB

  1. LoaderSVG

I used a 200px SVG created from loader.io

474Ă—1764 104 KB

and add -50% Transform on the Y Axis:

  1. Now for the interaction. Select the Loader Parent and create a new Interaction called Loader Interaction:

a) Initial Appearance set to Display Block
b) Add a Load Trigger with the following steps:

478Ă—702 40.9 KB

Make sure to tick the “Wait for Assets to Load” checkbox

  1. Put other content on your page, after the loader div and make sure the z-index of all other content is less than 5000 (no need to change anything if you are not using z-index for other stylings).

  2. Publish site and drink fast cup of something for 2000ms + the time it takes to load the page.

I hope this helps! Let me know in case any questions :slight_smile:

1 Like
10

Ohhh man! Cant wait to try this tomorrow! Thanks Dave! Love webflow!

1 Like
11

ok…edit post because i figured it a bit more.

12

im too noob still. I attempted to follow the instructions and there is a few things left out like setting the background to a color in the div box titled “loader”. It was throwing off. But downloading the page and looking at everything, got me to understand it and succeed in finalizing it. Good job Dave, :). I cant say how happy I am with your service. But, maybe consider in re writting it in a bit more detailed procedure so other noobs like myself don’t get lost.

13

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.