Eis o código:
<style>
.elementor-widget-loop-grid {
position: relative;
}
/* Overlay dentro do container */
.elementor-widget-loop-grid .spinner-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.7);
z-index: 9999;
display: none; /* inicialmente oculto */
}
.elementor-widget-loop-grid .spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 4px solid #f3f3f3;
border-top: 4px solid #555;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spinner 0.8s linear infinite;
}
@keyframes spinner {
100% {
transform: rotate(360deg);
}
}
/* Efeitos fade */
.elementor-loop-container {
transition: opacity 0.4s ease;
}
.elementor-loop-container.fading-out {
opacity: 0.3;
}
</style>
<div class="load-container">
<div class="spinner-overlay">
<div class="spinner"></div>
</div>
<div class="elementor-loop-container">
<!-- Posts aqui -->
</div>
<div class="elementor-pagination">
<!-- Paginação aqui -->
</div>
</div>
<script>
jQuery(document).ready(function($) {
var scrollOffset = 200;
$(document).on('click', '.elementor-pagination a.page-numbers', function(e) {
e.preventDefault();
var $clickedLink = $(this);
var $loadContainer = $clickedLink.closest('.elementor-widget-loop-grid');
var $container = $loadContainer.find('.elementor-loop-container');
var $pagination = $loadContainer.find('.elementor-pagination');
var $spinnerOverlay = $loadContainer.find('.spinner-overlay');
var url = $clickedLink.attr('href');
// Mostra spinner e aplica fade-out no container
$spinnerOverlay.show();
$container.addClass('fading-out');
$.ajax({
url: url,
type: 'GET',
success: function(data) {
var $data = $(data);
var $newPosts = $data.find('.elementor-loop-container').html();
var $newPagination = $data.find('.elementor-pagination').html();
// Atualiza o conteúdo
$container.html($newPosts);
$pagination.html($newPagination);
// Atualiza a URL sem reload
history.pushState({}, '', url);
// Rola suavemente até o topo do container com offset
$('html, body').animate({ scrollTop: $loadContainer.offset().top - scrollOffset }, 600);
},
complete: function() {
// Remove o fade-out e esconde o spinner após um pequeno delay
setTimeout(function() {
$container.removeClass('fading-out');
$spinnerOverlay.hide();
}, 300);
}
});
});
});
</script>