在等待异步响应时显示加载器

Question

i don't know how to show a loader while i'm waiting for a response by a funtion written in javascript.

I have one <div> which contain the response:

<input type="button" name="btn-s" value="Search">
<div align="center" id="div_feed_data">
</div>

and in the same page i call that function:

function get_feed_data(id_feed,not_add)
{
     if (window.XMLHttpRequest)    {
    // code for IE7+, Firefox, Chrome, Opera, Safari
     var xmlhttp=new XMLHttpRequest();
       }
     else    {
    // code for IE6, IE5
      var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
       xmlhttp.onreadystatechange=function()
      {    if (xmlhttp.readyState==4 && xmlhttp.status==200)
       {
     document.getElementById("div_feed_data").innerHTML=xmlhttp.responseText;   //NELL' ELEMENTO CON QUESTO ID VIENE MOSTRATO IL RISULTATO MANDATO DAL SERVER

    }
    }
       xmlhttp.open("GET","libraries/show_feed_data.php?id_feed="+id_feed+"&not_add="+not_add,true);
       xmlhttp.send();
 }

Now i'd like to place a loader gif instead of the button until the response is ready, but i don't know how to do because i've found just method for pure ajax code and i'm not good in js as in english, so i need an help, thank you guys!

Answer 1

See: http://fontawesome.io/examples/#animated

function get_feed_data(id_feed,not_add)
{
    $('#myIcon').fadeIn();
    ...
    ...
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
       // request is complete
       $('#myIcon').fadeOut();
    }
    ...
    ...
}