How to make a progress bar?

Question

I have a page that is loaded via jQuery load. Inside this page is an SQL query that takes on average 8 seconds.

I’d like to put some indication that the query is loading, could be a progress bar, display percentage, a circle running, anything. I searched Goolge but found nothing that helps me. Does anyone know any way to do this?

Script that loads the page:

$(document).ready(function(){
    $('.clica').click(function(){
        $('#new').load('opcoesConsultaSiga.php?cond='+$(this).val());
    });
});

HTML:

<button class="clica" value="-1">Exibir Tudo</button>
<button class="clica" value="2">Ordenar por estoque </button>
<button class="clica" value="4">Ordenar por custo </button>
<div id="new"></div>

Answer 1

You can use jQuery’s ready method.

Create a div with a "Loader" after the body and then hide as soon as the page has been fully loaded.

$( document ).ready(function() {
  $('#divLoader').hide();
});

You can also use . ajaxStart() / . ajaxStop()

jQuery Ready

jQuery Ajax Start/Ajax Stop

Duplicate, Post with a similar problem

Answer 2

The simplest way to do this would be to add a loading icon...

jQuery(document).ready(function($) {
   
  $("#carregar").on('click', function(){

    $("#loading").fadeIn('fast');

    setTimeout(function(){
      $("#loading").fadeOut('fast');
    }, 5000);

  });

});

#loading {
  display:none;
  position:fixed;
  top:0;
  left:0;
  background-color:rgba(0,0,0,0.3);
  width:100%;
  height:100%;
  overflow:hidden;
  padding:50% 0;
  margin:0;
  text-align:center;
}

#loading img{
  display:inline-block;
  margin:-8px 0;
}
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="carregar">Carregar</button>
<div id="loading">
  <img src="http://i.stack.imgur.com/Z4BUx.gif" alt="Carregando..." title="Carregando...">
</div>

Jsfiddle

Then just open the loading before the execution of AJAX, and hide it when it is complete:

$(document).ready(function(){
   $('.clica').click(function(){
   $("#loading").fadeIn('fast'); // Exibi o loading antes da requisição
      $.ajax({
         url: 'opcoesConsultaSiga.php?',
         type: 'GET',
         data: {cond: $(this).val()},
         success: function(data){
            $('#new').html(data);
         },
         error: function(x, y, z){
            $('#new').html($('<p />').text('Erro ao processar requisição: ' + y));
         },
         complete: function(){
            $("#loading").fadeOut('fast'); // Oculta o loading ao terminar a requisição
         }
      });
   });
});