Help Center
How to Add a Provider Preloader to Filters on the Front End

How to Add a Provider Preloader to Filters on the Front End

Find out how to add a provider preloader to Smart Filters to make the loading content animated on the front end.

Before you start, check the tutorial requirements:

By default, when you pick an option in the JetSmartFilters filter with the “AJAX” Apply type, the provider content appears with the “fade in” animation.

However, the default preloading effect can be changed.

Adjust Provider Preloader

To change the loading effect, navigate to WordPress Dashboard > Smart Filters > Settings and open the Provider Preloader tab.

Initially, one Provider preloader toggle is presented. This feature activates the default “Circle clip growing” preloader and allows modifying the default settings.

provider preloader settings

Explore the following fields to adjust the loading content according to your wishes:

fixed position
  • Fixed position — a toggle that fixes the position of the preloader in the center of the provider. If enabled, the Edge gap setting is displayed;
    • Edge gap — a field where you can specify the number of pixels from the edge of the provider to the preloader;
type, size, and color
  • Type — a drop-down list with the available preloader effects;
  • Size — a number field where the size of the loading icon can be defined;
  • Color — an icon color picker;
use background plane
  • Use background plane — a toggle that adds background to the loading icon;
    • Padding — four fields that allow setting the padding position of the background;
    • Border radius — a numeric value of the background border radius;
    • Background color — a color picker for the background.
preloader preview

Check the Result

To see the final result, go to the front-end page with any filter attached to any widget.

Select any option in the filter to see the loading effect you have recently adjusted.

provider preloader

That’s all; now you know how to set the provider preloader for smart filters on your WordPress website.

Was this article helpful?

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.