How to make a load bar inside a load () Javascript?

Question

How to make a load bar inside a load () Javascript?

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I have a php page index.php that loads another php page page.php with a load ():

$("#div").load('pagina.php');

On this page I have a For loop with a lengthy sql and I have to show the progress of this query. The problem is that this page is only loaded into the div after the query ends.

Is there a way for me to bring a load with the database progress of the page.php page into that javascript that loads before on the index.php page? For example:

$('#div').html("Carregando...");
$("#div").load('pagina.php');

But instead of the "Loading" message, I need to show some progress.

Thank you.

php mysql javascript

asked by anonymous 21.06.2016 / 20:15

2 answers

0

@PauloHDSousa: I also love pac-man and get a code

Do not forget to put the body on the page this comment

<html>
<style>
div#loading {
  width: 100%;
  height: 100%;
  display: table;
  background-color: black;
  position: fixed;
  z-index: 9999;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><bodystyle="margin: 0;">
<div id="loading">
	<div style="background:url('http://i.imgur.com/pI2458H.gif') no-repeat center center;width:50px;height:50px;display: table-cell;"></div>
</div>
<!--

COLOCA AQUI O CORPO DA PAGINA

-->
<script>$(document).ready(function() { $('div#loading').fadeOut() });</script>
</body>
</html>

21.06.2016 / 21:43

Remove title space in AlertDialog Webbrowser click button without name and ID DELPHI

score 1 · Accepted Answer

Follow the example below:

<html>
<style>
div#loading {
  width: 100%;
  height: 100%;
  display: table;
  background-color: rgba(0,0,0,0.5);
  position: fixed;
  z-index: 9999;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><bodystyle="margin: 0;">
<div id="loading">
	<div style="background:url('http://loading.io/assets/img/default-loader.gif') no-repeat center center;width:50px;height:50px;display: table-cell;"></div>
</div>
<!--

COLOCA AQUI O CORPO DA PAGINA

-->
<script>$(document).ready(function() { $('div#loading').fadeOut() });</script>
</body>
</html>

You can change the style of the loader and enter a site link