facetwp loading animation to cover all facets

custom-hooks.php

<?php
/** sample of css and js to create a custom loading animation to cover the full facet area
 ** change #facet-container to a id or class of container element for your facets
 ** update css as needed
 ** please see https://facetwp.com/documentation/support/ for questions
 **/

add_action( 'wp_head', function() { ?>
    <style>
		#facet-container {
			position: relative;
		}
		.custom-loader {
			position: absolute;
			background-image: url("/path/to/image");
			background-position: center;
			background-repeat: no-repeat;
		}
    </style>
<?php });

add_action( 'wp_head', function() {
	?>
	<script>
	(function($) {
		$(document).on('facetwp-refresh', function() {
			if (FWP.loaded) {
				$('#facet-container').prepend('<div class="custom-loader facetwp-loading"></div>');
				$('.custom-loader').height( $('#facet-container').height() ).width( $('#facet-container').width() );
			}
		});
	
		$(document).on('facetwp-loaded', function() {
			$('.custom-loader').remove();
		});
	})(jQuery);  
	</script>
	<?php
},100);

Hi,

Please see https://facetwp.com/documentation/support/ for questions on this snippet.

Thanks