Ajax Wordpress Pagination with loading gif


Staff member
I've been using this solution:

        jQuery(function($) {
            $('.recipe-results').on('click', '#pagination a', function(e){
                var link = $(this).attr('href');
                $('.recipe-results').animate({opacity:0.1}, 200, function(){
                    $(this).load(link + ' .recipe-results', function() {
                        $(this).animate({opacity: 1},200);

from here <a href="https://stackoverflow.com/questions/15983244/simple-wordpress-ajax-pagination">Simple Wordpress AJAX pagination</a>

and I want to be able to add a loading gif in between the fade out and fade in time. My HTML code is like this

  &lt;div class="recipe-results"&gt;

  &lt;?php if (have_posts()) : $count=1; ?&gt;
    &lt;div class="clearfix"&gt;
    &lt;?php while ( $loop-&gt;have_posts() ) : $loop-&gt;the_post(); ?&gt;

    &lt;?php $count++; endwhile;?&gt;
    &lt;?php endif; ?&gt;

    &lt;div id="pagination" class="clearfix"&gt;
          &lt;!-- pagination stuff here --&gt;
    &lt;/div&gt; &lt;!-- close pagination --&gt;

    &lt;/div&gt; &lt;!-- close recipe-results --&gt;

I've tried various solutions but i'm very much a beginner to AJAX with jQuery so haven't be able to find a working solution.

Thanks in advance.