How to make an animation start at the beginning of the process and only finish at the end of jquery?

Question

I’m having some difficulties in Jquery, using Datatables, where by clicking select a value in drop-list and clicking the "search" button, it makes an ajax and updates the Datatables with the data selected in the drop list.

However, I would like to apply an effect to an HTML element, which simply displays a "load" icon while the table is not finished loading.

In my code, apparently it only displays the "effect icon" at the end of loading, interestingly it does not show the beginning.

Follows html code:

        <button id="search" class="btn btn-primary mr-auto cursor-pointer"><i class="fa fa-search"></i></button>
    <div class="fa-2x" id="spinner-loading">        
      <i class="fa fa-spinner fa-spin"></i>
    </div>

Segue js:

  $(document).ready(function() {
    dataTable();
  });
  $("#search").on('click', function(event){
    $(this).attr('disabled', true);
    $('#spinner-loading').fadeIn(300);
    event.preventDefault();
    var vUsuario = $('#usuarios').val();
    dataTable(usuario = vUsuario);
    $('#search').attr('disabled', false);
    $('#spinner-loading').fadeOut(300);
  });
  function dataTable(usuario = '') {
    $('#tabelaCarteiras').DataTable({
      "destroy" : true,
      dom: 'Bfrtip',
      buttons: [
          'excel', 'pdf'
      ],
      fixedHeader: true,

      // request
      ajax: {
          url: '<?=base_url('carteiras/todasCarteiras/')?>' + usuario,
          dataSrc: 'data'
      },
      columns: [
        { data: 'cod_cliente' },
          { data: 'razao_social' },
          { data: 'cod_vendedor' },
          { data: 'telefone1' },
          { data: 'telefone2' }
      ]
    });
  };

I would like to know where I am missing in the code, because the effect does not start, just ends.

Ps: Datatables is loading normally without difficulties.

Answer 1

To display a message or a loading before the data is loaded in Datatables use: sLoadingRecords

Note: When using data originated from Ajax and during the first draw when the Datatables collects the data, this message is shown in a row empty in the table to indicate to the end user that the data is being loaded. Note that this parameter is not used when loading data by server-side processing, only data originating from Ajax with client-side processing.

Source: http://legacy.datatables.net/ref#bProcessing

var table = $('#example').DataTable({
  ajax: {
    url: 'https://api.myjson.com/bins/27bsh'
  },
 language : {
        sLoadingRecords : '<div id="loader"></div>'
    },    
  columns: [{
      data: 'first_name'
    },
    {
      data: 'last_name'
    }
  ]
})

#loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  margin-left: 250px;
  margin-top: 0px;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<table id="example">
  <thead>
    <tr>
      <th>Nome</th>
      <th>Sobrenome</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>