How to add loader to the table?

tomandquery

I am trying to add a loader gif image to the table that is suposed to show when the table and just the table is being processed. I do not want the loader for the whole document, just the table, since there is a lot of data the table first shows in its entirety - all rows (about 200...) and then after good 3-5 seconds the filter starts to work and shows only 10 rows as desired. So I would like the loader to show up before the table is ready. Currently I'm using those preInit and init to indicate when the loader should fire and when stop. Here is my init:

var ajaxTable = function () {

$.fn.dataTable.moment('DD-MM-YYYY HH:mm:ss');

$(document).on('preInit.dt', function (e, settings) {
    loaderStart();  // these are my custom fuctions to show gif loader mage and dim out the rest document
});
$(document).on('init.dt', function (e, settings) {
    loaderStop();  // these are my custom fuctions to show gif loader mage and dim out the rest document
});
$('.ajax-table').DataTable({
"sPaginationType": "full_numbers",
        "aLengthMenu": [
                [10, 20, 50, - 1],
                [10, 20, 50, "Wszystkie"]
        ],
        "bStateSave": true,
        "order": [0, 'desc'],
        "ordering": true,
(...)
// and the options continue...

Please help or advise what could be the recommended way of adding a loader, Thank you very much in advance!