The Web site of Alex S. Jones, community catalyst, user advocate, Web technologist, barbecue acolyte & information junkie

PHP Progress Bar

An interesting idea was posted to eVolt’s TheList in the form of a tip: using PHP’s flushing buffer to create a progress bar for large PHP applications. Juha Suni, the author of the tip, provided the following code, noting, that “you can use the flush()-function to push more data to the browser while the script is running. This data being elements for small pieces of the progress bar, you can rather easily have a universal solution for all heavy scripts”. The code below is as posted, the only changes are a couple of formatting tweaks for display on this site. I haven’t implemented it as of yet, so I can’t vouch for it’s functionality.


ob_end_flush(); // This should be called at start

// Load all data and process it ready for looping

// Do some preliminary calculations, such as:
$totalloops = 38;
$percent_per_loop = 100 / $totalloops;
$prev_percent = 0;

// print html/css for the part above the progress bar
// as well as possible background of the actual progress bar
// in such a way that the images for the progress bar (coming next)
// align themselves nicely
// (This example fits 100 images next to each other, each
// representing 1 percent of progress.

// Start looping:
for($i=1;$i< =$totalloops;$i++) {

    // do stuff
    // echo progress if at least an advance of 1 percent
    // occured since last loop
    $percent_now = round($i * $percent_per_loop);
    if($percent_now != $percent_last) {
        $difference = $percent_now - $percent_last;
        for($j=1;$j<=$difference;$j++) {
            echo '';
            }
       $percent_last = $percent_now;
       flush(); // Push the new data to the browser;
        }
}

// In the end print necessary code to the end of the html.

Juha notes, “on some occasions, the webserver, proxy or the client browser can buffer data no matter what you do, so this will not work 100% for everyone at every situation”. Still, this is a great idea, and one sorely needed for some major PHP apps.

Update: Juha has posted a nice demo of the script, which “loops the sleep(1)-command for 14 times”. He also added a counter that displays the percentage that has been completed. Juha mentioned that he hopes to find the time to clean it up and implement the counter as a package for use in other scripts and projects. That would be great to see!

Update 2: Juha has posted a zipped up collection of the PHP source files and associated images.

  1. the same thing can be achieved using an intermedite page.. a lot less effort and since the intermedite page could be anything, you can make a ‘prettier’ preloader ;)

    jim
    February 2, 2005
  2. True, an intermediate page could be used. There are many ways to achieve the end result, and many reasons to choose one option above another. But, I will say that Juha’s script looks to be pretty flexible, so the design (especially with proper use of CSS) is open, and thus could be made quite beautiful if one so chooses.

    February 2, 2005
  3. Great job man, i was testing in IE and FireFox and the functionality is good.

    Congratulations!!

    nice page.. O_o

    Luis Castillo Mata
    October 10, 2007
  4. I found that instead of using a div tag with z-order, it worked better for me to output updated javascript tags that set the innerHTML of a main div to what I need it to.

    Hope someone finds this usefull.

    Email Send Queue

    Processing emails for members.

    <?php

    ////////// END PROGRESS BAR ////////////

    //ob_end_flush();
    flush();
    for($i = 0;$i < $count;$i++) {
    sleep(1);
    ////////// PROGRESS BAR ////////////
    // Here are the commands to calculate the advance in percentages and print out the necessary progress
    // By flushing out images and an optional div showing the percentage in numbers
    //$percent_now = round($i * $percent_per_loop);
    $percent_now = round($i * $percent_per_loop);
    if($percent_now != $percent_last) {
    $innerHTML .= ”.”(”.$i.” of “.$count.”) “.$status.”. $percent_now.’ %’;
    $difference = $percent_now - $percent_last;
    for($j=1;$j<=$difference;$j++) {
    $innerHTML .= ”;
    }
    $percent_last = $percent_now;
    ?> divTag = document.getElementById(”progressStats”); divTag.innerHTML = ”;

    divTag = document.getElementById(”progressStats”);
    divTag.innerHTML = ‘Email Send Queue SUCCESSFULLProcessed members.<?php echo “Skipped “.$skippedBlankEmails.” blank email addresses.”;?>Send complete. / ‘;

    February 2, 2008
  5. This is a cool progress bar.

    What do I pass to the progressbar.php?
    So that it progresses according to the total size being uploaded.

    Mohammed
    February 2, 2008
  6. Thank you very much!

    Anonymouse Coward
    July 7, 2008
  7. excellent just what I was looking for!

    September 9, 2008
  8. That’s great to hear Matthew! Thanks for letting me know it was useful.

    September 9, 2008
  9. hi guys need assistance.. post me some code for a progress bar. i want to implement it on my pages..thanks in advance

    Begreat
    October 10, 2008
  10. Hi Begreat, there is a link to code in addition to the example given above. Check the link in Update 2 or Zack M’s comment above..

    October 10, 2008
  1. [...] Pasek postępu w PHP Kategorie: PHPAlex Jones zaprezentował bardzo prosty pasek postępu wczytywania strony. [...]

    February 2, 2006

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

Post Information

This entry is categorized under PHP & MySQL and tagged , , .

If you would like to follow the discussion on this post, you can follow the comment feed.