Pre-loader Plays Only Once

How to add NW Pre Loader Play Only Once Tool in Webflow?

‍

Step#1

Adding the script within Page Settings on Webflow.

Integrating our Pre Loader tool into your website is simple! Follow these steps to get started:

1. Click on "Pages" in the left navigation or press "P" on your keyboard.
2. Select the settings icon beside the page you want to add the script to.
3. Scroll down to the "Before </body> tag" section.
4. Simply copy the script we've provided and paste it here.

‍

Step#2

Set Element ID

To ensure the smooth functioning of our Preloader Animation tool, you will need to:

1. Ensure all the elements of the animation are wrapped in a div block.
2. Go to the Element Settings panel of this div block.
3. Add a custom ID with the following details:
   • ID: preloader

‍

Step#3

Set Custom Attribute

To ensure the smooth functioning of our Preloader Animation tool, you will need to add a custom attribute to the div block wrapping all the animation elements.

1. Go to the Element Settings panel.
2. Add a custom attribute with the following details:
   • Name: data-delay
   • Value: The maximum number of lines you want to display (e.g., 4000 which is 4 seconds).

‍

‍

‍‍‍“NOTE: The value needs to be equal to the time your Preloader takes to complete the animation

‍

Step#4

Publish Your Site

It's highly recommended to publish your site on a staging environment to ensure the script is working correctly. Once you have confirmed it, you can publish it to your primary domainBy following these steps, you will have successfully implemented the Pre Loader Tool on your Webflow site!