Add new comment

PHP Progress Bar Script

Posted on: 15 December 2011
By: admin

If you have a long running PHP script that executes many processes, you may need to inform user about the progress of the process when the script is still running and hasn't finished yet. Using progress bar can be the best option. We can combine the PHP flush() function, Javascript, and also CSS to create a nice progress bar.

There is another method to create the same kind of this progress bar by using Ajax and jQuery. You can read the new article about PHP Ajax Progress Bar.

Here is the technique.

Create at least one div element with a certain width in your HTML document for displaying the progress bar.
Estimate the progress percentage in your PHP script. This number will be used to determine the progress bar's length.
"Echo" the Javascript for updating the content of div element above with a div that the width percentage is same as the calculated progress. Also give the div a different background color or background image so we can see it.
"Flush" it to the browser.

And this is the code

<?php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title>Progress Bar</title>
</head>
<body>
<!-- Progress bar holder -->
<div id="progress" style="width:500px;border:1px solid #ccc;"></div>
<!-- Progress information -->
<div id="information" style="width"></div>
<?php
// Total processes
$total = 10;
// Loop through process
for($i=1; $i<=$total; $i++){
    // Calculate the percentation
    $percent = intval($i/$total * 100)."%";
    
    // Javascript for updating the progress bar and information
    echo '<script language="javascript">
    document.getElementById("progress").innerHTML="<div style=\"width:'.$percent.';background-color:#ddd;\">&nbsp;</div>";
    document.getElementById("information").innerHTML="'.$i.' row(s) processed.";
    </script>';
    // This is for the buffer achieve the minimum size in order to flush data
    echo str_repeat(' ',1024*64);
    // Send output to browser immediately
    flush();
    // Sleep one second so we can see the delay
    sleep(1);
}
// Tell user that the process is completed
echo '<script language="javascript">document.getElementById("information").innerHTML="Process completed"</script>';
?>
</body>
</html>
?>