Hey Edward

Ok, this is more a developer feature for now until I add something via the UI to make this easier.

Essentially, what you want to do is the following:

1) Create your loader and add it to your page / site.

So as a really basic example (by no means comprehensive or complete) – edit your themes “footer.php”.

Before the closing </body> tag add the following html code:

<div class="sf-loader" style="display:none">
Loading...
</div>

This will add an element to your page to use as a loader. This will need to be customised via CSS, such as centering it on the page etc but for now thats not important.

2) Add the loader code.

In your themes main JavaScript file, scroll the to very end, and after everything else add:

jQuery(document).ready(function($) {
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		$('.sf-loader').hide();
	});

	$(document).on("sf:ajaxstart", ".searchandfilter", function(){
		$('.sf-loader').show();
	});
});

now you will see an element on your site being shown/hidden when being loaded. As mentioned you will need to style it up.

Hope that helps!

Thanks

This code should go inside a script file (JS file).

Normally you would add this code into an already existing script file in your theme (it differs from theme to theme, so can’t advise) – but creating a whole new file and loading it in is also fine.

Just make sure when loading the script you have jquery as a dependency.

Thanks