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 (no longer live), 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 (see update 3 below) of the PHP source files and associated images.

Update 3: It appears that Juha’s site is down. I don’t have a demo to point to, but it appears someone else posted the script, which you can find here.

Comments

  1. jim says

    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 ;)

  2. says

    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.

  3. Luis Castillo Mata says

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

    Congratulations!!

    nice page.. O_o

  4. says

    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. / ‘;

  5. Mohammed says

    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.

  6. Begreat says

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

  7. says

    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..

  8. tom says

    Hey, I wonder, does this methodology still work in PHP5? are there better methodologies out there these days?

    That aside, the example script and ZIP no longer load, so I sort of assume that the script no longer works and is just throwing some errors I can’t see.

  9. says

    Just to let everyone know, the example’s URL does not work anymore. it just goes to a blank page.. this is not the fault of the script. website is down or something..

  10. says

    hey in my website i need a progress bar for image loading but i want a graphics bar which i already have.tell me how to insert graphics bar in correlation with file loading with the progress bar

  11. says

    ob_end_flush(); // This should be called at start
    ob_start();
    $lfbr = CHR(10) . ”;
    echo “Hello” . $lfbr;
    ob_flush();
    flush(); // Both flushes are needed
    echo “World” . $lfbr;
    sleep(2);
    ob_end_flush();

  12. Ahsun says

    I have a different problem. I am executing a script that can take longer than 30 seconds (assume 30 sec limit, after that request terminates).
    What My script does is it computes and prepare an excel file, and what i want is “not terminate the request” after 30 seconds.
    I have used above code which works fine for me except at the end when I flush the excel file to browser following error occured – Warning: Cannot modify header information – headers already sent in

    Help me to sort it.
    Thanks
    Ahsun

Trackbacks