By default, loading images will appear whenever facets refresh. However, this can be totally customized in FacetWP 1.6.0 and above.

Change the loader image

When facets refresh, the facet options get replaced with a loading <div>:

<div class="facetwp-loading"></div>

It uses a CSS background image, which can be changed with a little extra CSS:

How to use custom CSS?
CSS code can be placed in your (child) theme's style.css file. Alternatively, you can add it manually between <style> tags in the <head> section, in your (child) theme's header.php file. You can also add it with a wp_head hook in your (child) theme's functions.php file or in the Custom Hooks add-on. Or you can use a code snippets plugin. More info
.facetwp-loading {
    background: url(PATH_TO_YOUR_IMAGE.png) no-repeat;
}

Add entirely custom actions

FacetWP 1.6.0 includes a way to add a custom loading handler. It involves attaching a function to the FWP.loading_handler javascript variable.

<script>
(function($) {
    $(function() {
        // Make checkbox options semi-transparent
        FWP.loading_handler = function(params) {
            params.element.find('.facetwp-checkbox').css('opacity', 0.5);
        }
    });
})(jQuery);
</script>

When using FWP.loading_handler, an object with 3 elements is passed in:

How to use custom JavaScript?
JavaScript code can be placed in your (child) theme's main JavaScript file. Alternatively, you can add it manually between <script> tags in the <head> section of your (child) theme's header.php file. You can also add it with a wp_head or wp_footer hook in your (child) theme's functions.php file or in the Custom Hooks add-on. Or you can use a code snippets plugin. More info
params.element    // the facet DOM element
params.facet_name // the facet name
params.facet_type // the facet type

Hide the loading animation

To skip the loading animation, set FWP.loading_handler to an empty function:

<script>
(function($) {
    $(function() {
        FWP.loading_handler = function() { }
    });
})(fUtil);
</script>