jQuery Loader on a Ajax request

Question

I am creating an application in Node, which pulls objects in my Schema (Mongo) and presents them in HTML. Okay, all right so far.

Now I need to create a jQuery loader, which features a picture like this while the objects do not appear in the html -> https://i.sstatic.net/kQc8d.gif while the data does not appear.

$.ajax({
    type: 'GET',
    url: host + '/datas',
    success:function(datas) {
        datas.forEach (function (data) {
            var HTML = [];
            HTML.push('<tr class="datas">');
            HTML.push('<td>' + data.email + '</td>');
            HTML.push('<td>' + name.email + '</td>');
            reservasHTML.push('</tr>');
            $('tbody').append(reservasHTML.join(''));
        })
    }
});

How I can do this?

Answer 1

$.ajax({

    $(".datas").empty().html('<img src="http://i.imgur.com/hq37Dew.gif" />'); // SHOW THE AJAX LOADER
    type: 'GET',
    url: host + '/datas',
   success:function(datas){
        $(".datas").html(datas); // this will hide the loader and replace it with the data                            

        datas.forEach (function (data) {

            var HTML = [];
            HTML.push('<tr class="datas">');
            HTML.push('<td>' + data.email + '</td>');
            HTML.push('<td>' + name.email + '</td>');
            reservasHTML.push('</tr>');
            $('tbody').append(reservasHTML.join(''));

        })
   }
});

I think this is it.