Как добавить простой загрузчик/спиннер jquery с помощью ajax? ⇐ Jquery

[Anonymous]

Мне просто нужна небольшая помощь по добавлению простого загрузчика/спиннера в мою форму.
У меня есть форма поиска в моем jquery. Я хочу включить изображение загрузчика/спиннера во время поиска. После завершения процесса загрузчик снова не будет виден.

Вот мой код, кстати, я использую CodeIgniter.

Вот мой код при нажатии кнопки поиска:

//search
$('#search-btn').on('click',function(){

var query = $("#keyword").val();

var image = "";

$('#loading').html(' + image + ');

var query_url = "";

$.ajax({

type:'POST',
url: query_url,
data:{query: $("#keyword").val()},
dataType:'json',
async: false,
success:function(d){

//$('.display').dataTable().fnDestroy( true );

$("#example tbody").html(""); //HERE'S MY PROBLEM, DOESN'T DISPLAY LOADER WHEN SEARCHING

for(i in d){

$("#example tbody").append("" + d['item_code'] + "" + d['item_name'] + "");

}

//$("#search_result").show('blind');

$("[data-item]").on('click',function(){

var code = $(this).parents('tr').find('[data-code]').html();
var name = $(this).parents('tr').find('[data-name]').html();
// console.log(code,name);
$("#grid1 tbody").append("----PC/PCSBOX/BOXES");

ComputeTotal();

});

$('.display').dataTable({
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"bAutoWidth": false,
"bDestroy": true,
"bJQueryUI": false,
"bRetrieve": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 25,
"destroy": true
});

//$('.display').dataTable().fnDestroy(true);

//$('.display').children().remove()

},

});

});


Вот форма поиска








SEARCH ITEM




Name/Description















CODE
NAME/DESCRIPTION











Подробнее здесь: https://stackoverflow.com/questions/194 ... using-ajax