Adicionando carregador personalizado à Listing Grid ao filtrar em AJAX

Coloque o ícone na página e torne-o animado

Inicialmente, crie uma seção acima do widget Listing Grid . Encontre e coloque os widgets padrão Elementor Icon e Heading lá.

Personalize o conteúdo ao seu gosto. Você pode ver o exemplo na imagem abaixo.

resultado final do carregador personalizado no construtor de páginas elementor

Na guia Configurações avançadas , cole o código CSS ID exclusivo no campo correspondente do widget Listing Grid .

listando o campo de id css da grade

Encontre o filtro que você usou na página e cole o mesmo ID no campo Query ID .

campo de ID de consulta de filtro

Em seguida, preencha o campo CSS ID da coluna onde o ícone e o título são colocados com um novo ID exclusivo.

campo de id css da coluna

Depois de definir o modelo do carregador, siga as etapas a seguir para torná-lo móvel.
Para criar uma animação, abra o Painel do WordPress > CSS e JS personalizados > Adicionar diretório CSS personalizado e cole o seguinte código CSS:

#loading_icon i {
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;

campo CSS e JS personalizado

Você pode verificar a página; o ícone estará carregando. Vamos ocultar o modelo assim que a página for carregada.
Adicione mais um código da mesma forma que você fez na etapa anterior:

#loading_icon {
    display:none;
}
#loading_icon i {
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
}

Definir condição para aparência do ícone

Para o bom funcionamento da função e animação, adicione o seguinte código JS:

Aviso

Como já usamos a primeira parte do código, copie e cole apenas a segunda parte .php. Além disso, lembre-se de alterar as seguintes partes do código. Na parte seguinte do código, coloque o slug da página onde o widget/bloco Listing Grid está localizado em vez do valor “jetsmartfilter-jetlisting-custom-spinner”. Em segundo lugar, cole o ID CSS da sua coluna em vez do valor “itchy-loader” anterior. E, por fim, coloque o ID CSS da sua Listing Grid em vez do valor “my-product-listing”.

view raw custom_loader.css hosted with ❤ by GitHub

	/For Elementor Pro User – in Custom CSS tab/
	/In the custom spinner container widget Custom CSS field /
	selector {
	display:none;
	}
	selector i {
	-webkit-animation: fa-spin 2s infinite linear;
	animation: fa-spin 2s infinite linear;
	}

	/Others/
	#itchy-loader {
	display:none;
	}
	#itchy-loader i {
	-webkit-animation: fa-spin 2s infinite linear;
	animation: fa-spin 2s infinite linear;
	}

view raw custom_loader.css hosted with ❤ by GitHub

view raw custom_loader.php hosted with ❤ by GitHub

	<?php
	add_action( ‘wp_footer’, ‘itchycode_enhance_jetsmartfilters_loading_spinner’ );

	function itchycode_enhance_jetsmartfilters_loading_spinner() {
	//Only target on one of my page, jetsmartfilter-jetlisting-custom-spinner is my page slug
	if( ! is_page(‘jetsmartfilter-jetlisting-custom-spinner’) ) return;

	?>
	<script>
	document.addEventListener(‘DOMContentLoaded’, function() {
	(($)=>{
	//We must wait for the jQuery ready event because JetSmartFilters is not initialized yet
	$(document).ready(function(){

	//Get the spinner container
	const spinnerContainer = document.getElementById(‘itchy-loader’);

	//Get the listing container
	const listingContainer = document.getElementById(‘my-product-listing’);

	if(spinnerContainer && listingContainer) {

	//Subscribe start loading event bus by JetSmartFilters
	window.JetSmartFilters.events.subscribe(‘ajaxFilters/start-loading’, ()=>{
	spinnerContainer.style.display = ‘flex’;
	listingContainer.style.display = ‘none’;
	})

	//Subscribe end loading event bus by JetSmartFilters
	window.JetSmartFilters.events.subscribe(‘ajaxFilters/end-loading’, ()=>{
	spinnerContainer.style.display = ‘none’;
	listingContainer.style.display = ‘flex’;
	})
	}

	})
	})(jQuery)
	});
	</script>
	<?php
	}

	?>

view raw custom_loader.php hosted with ❤ by GitHub

Você pode conferir o resultado na página ao vivo. É isso; agora você sabe como criar a animação do carregador personalizado do widget/bloco Listing Grid após filtrá-lo.

Adicionando carregador personalizado à Listing Grid ao filtrar em AJAX

Coloque o ícone na página e torne-o animado

Definir condição para aparência do ícone

Curtiu o conteúdo? Tem muito mais no grupo.

Exibindo ícone do campo repetidor usando o complemento de Dynamic Data

Adicionando status de estoque personalizado usando JetEngine

Apresentando upsell do WooCommerce

Não é possível exibir iframe com widgets dinâmicos