Add a simple preloader to visual builder forms created with GiveWP

givewp_form_preloader.php

<?php
add_action( 'wp_footer', function(){
    ?>
      <script>
		document.addEventListener('DOMContentLoaded', () => {
		  const wrapper = document.querySelector('.root-data-givewp-embed');
		  const iframe = wrapper?.querySelector('iframe');

		  if (!wrapper || !iframe) {
			return;
		  }

		  // Create preloader element
		  const preloader = document.createElement('div');
		  preloader.className = 'iframe-preloader';
		  preloader.innerHTML = '<span class="spinner"></span>';

		  wrapper.style.position = 'relative';
		  wrapper.appendChild(preloader);

		  // Hide preloader when iframe finishes loading
		  iframe.addEventListener('load', () => {
			preloader.classList.add('hidden');

			// Optional: remove from DOM after fade-out
			setTimeout(() => {
			  preloader.remove();
			}, 300);
		  });
		});
	</script>
	
	<style>
		.iframe-preloader {
		  position: absolute;
		  inset: 0;
		  background: transparent;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  z-index: 10;
		  transition: opacity 0.3s ease;
		}

		.iframe-preloader.hidden {
		  opacity: 0;
		  pointer-events: none;
		}

		.spinner {
		  width: 36px;
		  height: 36px;
		  border: 3px solid #ddd;
		  border-top-color: #555;
		  border-radius: 50%;
		  animation: spin 0.8s linear infinite;
		}

		@keyframes spin {
		  to {
			transform: rotate(360deg);
		  }
		}
	</style>
<?php
});