facetwp loading animation to cover all facets

djrmom

{{gist file=”custom-hooks.php” lang=”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);
{{/gist}}