How to set a pre loader animation to play only once

Design help Custom code
1

Hey there!

I have a pre-loader animation on my site which I’d like to load only once per visit (or per day - doesn’t matter).
I’ve found a FinSweet tutorial on how to do this but the cloneable states that the code is outdated and I cannot figure out how to implement the updated code.
Is anyone able to please assist me on how to make my loading animation only play once?

Many thanks!

Here is my site Read-Only: Webflow - Ashna Lulla

2

Gonna use their javascript for this, instructions are below. Haven’t used this before, but it’ll give you the basics of what you need to do:

<script>
/**
 * Set a cookie.
 * @param cname The name of the cookie to set.
 * @param cvalue The value to set for the cookie.
 * @param exdays The number of days until the cookie expires.
 */
const setCookie = (cname, cvalue, exdays) => {
  const d = new Date();

  d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
  const expires = 'expires=' + d.toUTCString();

  document.cookie = `${cname}=${cvalue};${expires};path=/`;
};
/**
 * Get a cookie by name.
 * @param name The name of the cookie to get.
 * @returns The value of the cookie.
 * @see https://stackoverflow.com/a/25490531/104380
 */
const getCookie = (name) => {
  return (document.cookie.match(`(^|;)\\s*${name}\\s*=\\s*([^;]+)`) || [])[2] || null;
};
/**
 * Remove a cookie by setting it to an empty value and setting its expiration date in the past.
 * @param name The name of the cookie to remove.
 */
const removeCookie = (name) => {
  console.log('removing cookie');

  document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/;`;
};

document.addEventListener('DOMContentLoaded', function () {
  console.log('window.onload');
  const WAIT_TIME = 4500;
  const COOKIE_NAME = 'seenGif';
  const LOADING_WRAPPER_SELECTOR = '[fs-hacks-element="loading-wrapper"]';
  const CLEAR_BUTTON_SELECTOR = '[fs-hacks-element="clear-cookie"]';
  const loadingWrapper = document.querySelector(LOADING_WRAPPER_SELECTOR);
  const clearButton = document.querySelector(CLEAR_BUTTON_SELECTOR);

  if (!loadingWrapper || !clearButton) return;
  const hasSeenPreloader = getCookie(COOKIE_NAME);

  console.log(hasSeenPreloader);

  clearButton.addEventListener('click', () => {
    removeCookie(COOKIE_NAME);
  });
  if (hasSeenPreloader) return;

  loadingWrapper.style.display = 'flex';

  setCookie(COOKIE_NAME, 'true', 1);

  setTimeout(() => {
    loadingWrapper.style.display = 'none';
  }, WAIT_TIME);
});
</script>

1. Prepare Your Preloader GIF

First, you need a GIF to use as the preloader. Ensure your GIF is optimized for web use to minimize loading times. Upload this GIF to your Webflow project.

2. Add the Preloader to Your Site

  • Create a Preloader Element: In the Webflow Designer, add a new div block to your site’s body element. This div will contain your GIF. Set it to be 100% width and height, with fixed positioning to cover the entire viewport (just making up some styling). Give it a class name for easy reference, e.g., loading-wrapper.
  • Insert Your GIF: Inside the div you just created, insert an Image element and set it to your preloader GIF.
  • Add Custom Attributes: To link your HTML elements with the JavaScript code, add custom attributes to your preloader div and any other element you want to control, like a button to clear cookies. For the preloader div, add a custom attribute with the name fs-hacks-element and value loading-wrapper. If you have a button to clear the preloader cookie, add the same attribute with the value clear-cookie.

3. Embed the JavaScript Code

  • Add a Custom Code Embed: In the Webflow Designer, drag an Embed element to the bottom of your page, preferably just before the closing </body> tag.
  • Paste the JavaScript Code: Copy the JavaScript code snippet provided and paste it into the Embed element. This script manages the display of your preloader GIF, sets a cookie to remember if a visitor has seen the preloader, and includes functionality to clear the cookie.

4. Publish Your Site

After embedding the code and setting up your preloader, publish your site to test the functionality. The preloader should display for a set amount of time (as defined in the WAIT_TIME variable) before hiding itself. It will only show once per visitor per day, thanks to the cookie logic implemented in the script.

Additional Notes:

  • Customize Wait Time: You can adjust the WAIT_TIME variable in the script to control how long the preloader is displayed.
  • Testing: Use Incognito/Private browsing mode to test the preloader functionality multiple times without needing to manually clear cookies.
  • Optimization: Ensure your GIF is optimized for quick loading to improve the user experience.