Real time progress bar in PHP

---

A progress bar can be used to indicate the status of any PHP function running in the background. I will show you the easiest way to create a real-time progress bar to monitor the status of your PHP script running on the server just by using simple pure PHP code and some javascript.

If you are a PHP developer then probably you notice that you will not get the output in your view page unless the PHP script is completely executed. You cannot even use Ajax as ajax success function only triggered when PHP script completed its execution. So the trick is to forcefully flush the output to view the page using flush and ob_flush function in PHP and javascript to update your progress bar in real time instead of using ajax calls.

Here is the code for view page

<div class="container">
  <div class="row">
    <div class="col-md-12">
	    <p>&nbsp;</p>
		<p>&nbsp;</p>
		<button type="button" id="button1"  class="btn btn-success btn-block">Click Here To Start Progress Bar</button>
		<p>&nbsp;<p>
		<button type="button" id="button2"  class="btn btn-danger btn-block">Click Here To Stop Progress Bar</button>
    </div>
    <div class="col-md-12">
		<p>&nbsp;</p>
	    <p>&nbsp;</p>
		<div id="progressbar" style="border:1px solid #ccc; border-radius: 5px; "></div>
  
		<!-- Progress information -->
		<br>
		<div id="information" ></div>
	</div>
  </div>
</div>

<iframe id="loadarea" style="display:none;"></iframe><br />

I use bootstrap for a little styling and here is the javascript code you must include at the bottom of your view page.

<script >
	$("#button1").click(function(){
		document.getElementById('loadarea').src = 'progressbar.php';
	});
	$("#button2").click(function(){
		document.getElementById('loadarea').src = '';
	});
</script>

When button1 is clicked jquery click function will be triggered which will result in loading the progressbar.php file in an iframe. The button2 is used to stop the progress bar.

Here are the codes in progressbar.php file

<?php
session_start();

ini_set('max_execution_time', 0); // to get unlimited php script execution time

if(empty($_SESSION['i'])){
    $_SESSION['i'] = 0;
}

$total = 100;
for($i=$_SESSION['i'];$i<$total;$i++)
{
    $_SESSION['i'] = $i;
    $percent = intval($i/$total * 100)."%";   
	
    sleep(1); // Here call your time taking function like sending bulk sms etc.

    echo '<script>
    parent.document.getElementById("progressbar").innerHTML="<div style=\"width:'.$percent.';background:linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); ;height:35px;\">&nbsp;</div>";
    parent.document.getElementById("information").innerHTML="<div style=\"text-align:center; font-weight:bold\">'.$percent.' is processed.</div>";</script>';

    ob_flush(); 
    flush(); 
}
echo '<script>parent.document.getElementById("information").innerHTML="<div style=\"text-align:center; font-weight:bold\">Process completed</div>"</script>';

session_destroy(); 

I use the sleep function to demonstrate a time taking task. You can call your own time taking function there like sending bulk SMS or mail to users etc. flush() is a low-level flush that instructing PHP to flush its internal, low-level data buffers and ob_flush() is a high-level flush. It flushes high-level buffers and puts all content in the low-level.

Here is the output of above program

Note

You must use both flush and ob_flush function to make progress bar real time. If you don't use one of them then your progress bar update only in certain intervals of time and not in real time. Also, don't forget to set maximum execution time to unlimited otherwise progress bar stop after 30 seconds (Default maximum PHP script execution time). Comment below if you have any doubts or occur any problems.