How to implement progress bar in php

[impact]

Hello,

In my site, I have a login.php page. Using tables and iframe I am loading the actual login form from another page login_form.php at one particular position in the login.php.

Basically trying to recreate a login page like gmail.com

Now I want to add a Waiting signature while the form is submitted and user is redirected to account page. This I would like to have within the same table where iframe is located.

After a couple of search I came across these sites <snipped url>

but unfortunately, I am not so good in java or php. So I have no idea how to implement this. can some one please guide me to implements this java codes?

Thank you,

[edited by: whoisgregg at 5:30 pm (utc) on Sep. 25, 2009]
[edit reason] Whoops, no URLs please. See TOS [webmasterworld.com] :) [/edit]

[whoisgregg]

Most login scripts will show a "spinner" to indicate pending activity instead of a progress bar because you don't really know exactly how much time is left.

Now, if your login script takes a lot of time to process (lots of DB queries, etc.) then one thing you can do to display a progress bar is to flush() the content of your script periodically with output to update a <div> styled to look like a progress bar.

So, basically, the first thing you output is:

echo '<h1>Logging into system...</h1>';
echo '<div id="progress" style="width: 100px;border: 1px solid black"><div id="progress_bar" style="height: 24px; width: 1px;background: blue;"></div></div>';
ob_flush(); flush(); usleep(300000); // <- forces output to be sent to browser

Then, periodically in your code, echo this kind of javascript code:

// tell the user we're 10% done:
echo '<script>document.getElementById("progress_bar").style.width = \'10px\'; </script>';
ob_flush(); flush(); usleep(300000);

...do some processing...

 // tell the user we're 50% done:
 echo '<script>document.getElementById("progress_bar").style.width = \'50px\'; </script>';
ob_flush(); flush(); usleep(300000);

...and finally, update the progress bar to full:

 // tell the user we're 100% done:
 echo '<script>document.getElementById("progress_bar").style.width = \'100px\';</script>';
ob_flush(); flush(); usleep(300000);

This only works if your login script does lots of different things that take approximately the same amount of time. If it just has one query that takes forever, you won't be able to intersperse these javascript statements.

[impact]

Thank you, Thank you.