How can I set loading image during post data processing for jquery ajax?

Question

The jquery ajax code is:

$("#id_btnpolls").click(function(){ 
    var valCheckedRadio = $('input[name=data[distributions]]:checked').val();
    //alert(valCheckedRadio);       

    $.ajax({
        type: "POST",
        url: "/pollanswers/checkpollanswers",
        data: "valCheckedRadio="+valCheckedRadio,       
        success: function(prm){
            //alert(prm);
            $("#id_color_polls").html(prm);
        }           
    });

})

When I click the button, the data is displayed after 5 seconds or so. During that loding period I want to add a loading image. How can I do this?

Answer 1

Here's the CSS + HTML I use for my loading image. I use jQuery to simply add a class that changes the opacity from 1 to 0, in combination with a CSS transition property for a fade effect. The background image for #loader is 220px X 80px and is just a solid color rounded rectangle with the text "loading" on the right hand side. The actual "ajax" spinner img is 60px tall, so that relative positioning and negative margin are there to center the img vertically.

   #loader {
        width: 220px;
        height: 80px;
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: -1;
        opacity: 0;
        background: url(assets/images/bg-loader.png) no-repeat center center;
        transition: all .5s ease-in-out;
        margin: -40px 0 0 -110px;
    }

    #loader img {position: relative; top: 50%; margin-top: -30px; left: 10px;}

    .loading #loader {z-index: 1000; opacity: 1.0}

And the HTML (i got the loader.gif from here http://www.preloaders.net ):

    <div id="loader"><img src="<?php bloginfo('stylesheet_directory'); ?>/assets/images/loader.gif" /></div>

And then your jQuery:

$("#id_btnpolls").click(function(){ 
    var $body = $('body'),
         valCheckedRadio = $('input[name=data[distributions]]:checked').val();

    $body.addClass('loading');       

    $.ajax({
        type: "POST",
        url: "/pollanswers/checkpollanswers",
        data: "valCheckedRadio="+valCheckedRadio,       
        success: function(prm){
            //alert(prm);
            $("#id_color_polls").html(prm);
            $body.removeClass('loading');
        }           
    });

})