A loading appears while loading Jquery content

Question

I have the following code:

<div id="conteudo"></div>

<script>
      var qnt_result_pg = 20;
      var busca = "";
        var pagina = 1;
            $(document).ready(function () {
                listar_usuario(pagina, qnt_result_pg, busca);
            });
            function listar_usuario(pagina, qnt_result_pg, busca){
      var dados = {
                    pagina: pagina,
          busca: busca,
                    qnt_result_pg: qnt_result_pg
                }
                $.post('<?php echo $caminhoAbsoluto; ?>/listar-pagamentos-pendentes.php', dados , function(retorna){
                    $("#conteudo").html(retorna);
                });
            }
</script>

It returns me the list of registered users on my page, but the bank has more than 7 thousand registrations and even have put a pagination, it takes a few seconds to open. How can I make a loading appear while the content is not loaded?

Answer 1

You can place an image or an element made with CSS to appear while the data is loaded, after it is loaded just hide the page element.

In Javascript you will have to put the callback done() which is executed when the function completes its actions by: $.post(// seu codigo).done(//acao após concluir post).

Here is the jQuery documentation $.post who has examples with done().

Follow an example code taking data in JSON.

$(function(){
  $.getJSON("http://mysafeinfo.com/api/data?list=englishmonarchs&format=json", function(data){
    $.each(data, function(key, val){
      $(".monark").append("<tr>"+
      "<td>"+val.id+"</td>"+
      "<td>"+val.nm+"</td>"+
      "<td>"+val.cty+"</td>"+      
      "<td>"+val.hse+"</td>"+      
      "<td>"+val.yrs+"</td>"+
      "</tr>");
    });
  }).done(function(){
    $(".outer").hide("slow");
  });
});

.outer {
  display: table;
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,.8);
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  text-align: center;
}

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
  width: 120px;
  height: 120px;
  margin: 0 auto;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-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/3.2.1/jquery.min.js"></script>

<div class="outer">
  <div class="middle">
    <div class="inner">
      <div class="loader"></div>
    </div>
  </div>
</div>

<table class="monark"></table>