Develop loading in steps with JS/PHP

Question

I have a PHP screen where I have some steps to do, as these steps are done, the browser is in white and carrying, then would like to place a loading, where would show the user what is being done.

The steps I take are:

1 - Consultar API.
2 - Calculando Resultados.
3 - Gerando Arquivo.

And each step is a function I do in PHP. How can I fit a running loading for the user to verify that the process is running?

I use Codeigniter Framework for PHP and Bootstrap.

Answer 1

A practice for displaying the status of the code being processed in slower or more processed reloads, such as batch processing, file loading, bulk mailing, etc.If you want to use php’s flush function, I suggest you take a look at the documentation, but summarizing what the flush does is display on the screen what has already been processed to the point where it is and continues processing. http://php.net/manual/en/function.flush.php

Since you did not put the code, I will put in a generic way the process and Voce can adapt to your reality...

   for($x=0; $x <= 10000; $x++){
        echo 'bloco 1 - linha'. $x.'<br>';

  }

  flush();
//  Aqui ele explode na tela o primeiro bloco antes de começar a processar o segundo...

   for($y=0; $y <= 10000; $y++){
        echo 'bloco 2 - linha'. $y.'<br>';

  }

  flush();
//  Aqui ele explode na tela o segundo bloco antes de começar a processar o terceiro...
for($z=0; $z<= 10000; $z++){
        echo 'bloco 2 - linha'. $z.'<br>';

  }
  //ao completar o processamento ele vai exibir o restante da página