Ajax Wordpress Pagination with loading gif

[admin]

I've been using this solution:

$(document).ready(function(){
        jQuery(function($) {
            $('.recipe-results').on('click', '#pagination a', function(e){
                e.preventDefault();
                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

  <div class="recipe-results">

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

    <?php $count++; endwhile;?>
    </div>
    <?php endif; ?>

    <div id="pagination" class="clearfix">
          <!-- pagination stuff here -->
    </div> <!-- close pagination -->

    </div> <!-- close recipe-results -->

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.