PHP Progress Bar

2/1/2005 · 16 comments

in PHP & MySQL

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.

Did you like this? Please share it:

Add to Twitter Add to Delicious Add to Facebook Add to Stumble Upon Add to Digg Add to Reddit Add to Yahoo Buzz

1 trackback

ePHP.pl » Notki » Pasek postępu w PHP
2/1/2006 at 4:05 pm

15 comments so far… Jump into the discussion and tell us what you think.

jim 2/27/2005 at 11:42 am

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

Reply

Alex Jones 2/27/2005 at 11:53 am

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.

Reply

Luis Castillo Mata 10/5/2007 at 11:46 am

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

Congratulations!!

nice page.. O_o

Reply

Zack M. 2/1/2008 at 12:55 pm

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

Reply

Mohammed 2/6/2008 at 6:19 pm

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.

Reply

Anonymouse Coward 7/15/2008 at 2:09 pm

Thank you very much!

Reply

Matthew Fedak 9/17/2008 at 9:18 am

excellent just what I was looking for!

Reply

Alex 9/17/2008 at 10:11 am

That’s great to hear Matthew! Thanks for letting me know it was useful.

Reply

Begreat 10/27/2008 at 8:02 am

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

Reply

Alex 10/27/2008 at 8:52 am

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

Reply

maninder singh 3/26/2009 at 12:01 am

HI i need a flash loading bar along with php script .any one who know plz help me.
regards,
maninder singh

Reply

tom 5/20/2009 at 12:55 pm

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.

Reply

Brad 8/31/2009 at 12:48 am

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

Reply

Hima 9/9/2009 at 9:32 pm

very impressive php bar using console here http://updel.com/php-console-progress-bar/

Reply

siddhu 12/29/2009 at 6:56 am

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

Reply

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Previous post:

Next post: