How to make a progress bar? [duplicate]

Question

How to make a progress bar? [duplicate]

Navigation

#1 by (3 votes)
#2 by (3 votes)

3

I have a page that loads via jQuery load. Within this page there is an SQL query that takes an average of 8 seconds.

I would like to put some indication that the query is loading, it can be a progress bar, display percentage, a circle running, anything. I ran into Goolge, but I did not find anything that would help me. Does anyone know of 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>

jquery ajax

asked by anonymous 26.10.2015 / 12:03

2 answers

3

You can use the jQuery ready method.

You 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

26.10.2015 / 12:18

how to make an event using the enter key? I am in doubt how to do [closed]

score 3 · Accepted Answer

The simplest way to do this would be by adding 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><buttonid="carregar">Carregar</button>
<div id="loading">
  <img src="http://i.stack.imgur.com/Z4BUx.gif"alt="Carregando..." title="Carregando...">
</div>

JsFiddle

Then just open loading before executing AJAX, and hide it when 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
         }
      });
   });
});