How to make a progress bar?

Asked

Viewed 1,590 times

3

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>

2 answers

3

3


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
         }
      });
   });
});
  • Thanks for the @Kaduamaral reply, I made an update on the question explaining the problem better and put my code. According to the code I have, where I could put the $("#loading").fadeOut('fast');?? I tried to do in a similar way that I had found before and it didn’t work.

  • Hi @Amandalima, I updated the answer with your request... Test and see if it works (since I have not tested...). ;)

  • It worked, thank you! But I put $("#loading").fadeIn('fast'); inside $('.clica').click(function(){

  • That actually should be right there, got the wrong answer. I’ll correct. ;)

Browser other questions tagged

You are not signed in. Login or sign up in order to post.