Dawn theme custom liquid section customization - urgent

[Sivadarshan]

On my website, I’ve embedded a form using custom Liquid code. When visiting the page, there is a slight loading delay for that section. I’d like to implement a spinner (preloader) specifically for the form section to improve user experience during this loading time.

Is it possible to create a preloader that only affects this section, rather than the entire page?

Here’s the page in question: https://varthagaminternational.in/pages/get-sample

Thanks in advance for your help!

[MandasaTech]

Hello @Sivadarshan 

Yes, it’s absolutely possible to implement a preloaded for just a specific section (like your form) without affecting the entire page load.

Here’s a basic approach you can follow:

1. Wrap your form in a container, for example:

<div id="form-wrapper">
  <div id="form-loader">Loading...</div>
  <!-- Your form embed code -->
</div>

1. Add CSS for the loader:

#form-loader {
  display: block;
  text-align: center;
  padding: 20px;
  font-size: 16px;
}
#form-loaded .form-loader {
  display: none;
}

1. Use JavaScript to hide the loader once the form loads:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const formWrapper = document.getElementById("form-wrapper");
    // Adjust this based on when your form finishes loading (e.g., iframe load, ajax complete, etc.)
    setTimeout(() => {
      formWrapper.classList.add("form-loaded");
    }, 1000); // You can use actual event listeners if applicable
  });
</script>

This way, the spinner only affects your form area and improves the UX during that short load time.

Let me know if you need help tailoring it to your exact code. Happy to help further!

[Sivadarshan]

@MandasaTech please can you give the complete where I want to embed the codes

[MandasaTech]

You can add this code to the bottom of your Custom Liquid.

[tim]

You can add the following code to the bottom of your "Custom Liquid", or in a separate "Custom Liquid" section:

<style>
[id^=zf_div] {
  display: block;
  position:relative;
}
[id^=zf_div]:before {
  content: "";
  position: absolute;
  top:3rem;
  height: 2px;
  background:#31a158;
  animation: 3s grow ease-in-out infinite alternate;
}
[loaded] [id^=zf_div]:before {
  content: none;
}
@keyframes grow {
  0% { width: 0 };
  100% {width: 100%};
}
</style>
<script>
window.addEventListener('load', ()=> { 
  document.documentElement.setAttribute('loaded', true); 
});
</script>