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!

‍

Benefits of the NW Pre Loader Play Only Once Tool

The NW Pre Loader Play Only Once tool is essential for enhancing user experience on your site.

By allowing your preloader animation to run only once, it prevents the repetitive load each time a user navigates through your website.

This keeps the site feeling fresh while still delivering a smooth and visually appealing loading experience.

‍

Use Cases for the NW Pre Loader Play Only Once Tool

Branding and Design: Use this tool to showcase your brand’s identity with a unique animation that plays only once when users first load your website.

E-commerce: For e-commerce sites with large product catalogs, the preloader animation can create a seamless loading experience for visitors, ensuring they’re not waiting unnecessarily for content to appear.

Portfolio Sites: Highlight your design or creative work with a polished preloader animation, giving visitors an immersive first impression.