facetwp loading animation to cover all facets


{{gist file=”custom-hooks.php” lang=”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() { ?>
#facet-container {
position: relative;
.custom-loader {
position: absolute;
background-image: url(“/path/to/image”);
background-position: center;
background-repeat: no-repeat;
<?php });

add_action( ‘wp_head’, function() {
(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() {