php code to make progress bar disappear

amused2deathorg

I wanted to see if someone can easily provide me code and tell me where it would go into this code to make the bar disappear after it loads completely.

Here is the article on this site.

PHP Progress Bar Code Article

This is the page I want it to disappear on:
Amused2Death Photos

Here is the code:

<?php
// A function that will create the initial setup
// for the progress bar: You can modify this to
// your liking for visual purposes:
function create_progress() {
  // First create our basic CSS that will control
  // the look of this bar:
  echo "
<style>
#text {
  position: absolute;
  top: 100px;
  left: 50%;
  margin: 0px 0px 0px -150px;
  font-size: 18px;
  text-align: center;
  width: 300px;
}
  #barbox_a {
  position: absolute;
  top: 130px;
  left: 50%;
  margin: 0px 0px 0px -160px;
  width: 304px;
  height: 24px;
  background-color: black;
}
.per {
  position: absolute;
  top: 130px;
  font-size: 18px;
  left: 50%;
  margin: 1px 0px 0px 150px;
  background-color: #FFFFFF;
}

.bar {
  position: absolute;
  top: 132px;
  left: 50%;
  margin: 0px 0px 0px -158px;
  width: 0px;
  height: 20px;
  background-color: #0099FF;
}

.blank {
  background-color: white;
  width: 300px;
}
</style>
";

  // Now output the basic, initial, XHTML that
  // will be overwritten later:
  echo "
<div id='text'>Script Progress</div>
<div id='barbox_a'></div>
<div class='bar blank'></div>
<div class='per'>0%</div>
";

  // Ensure that this gets to the screen
  // immediately:
  flush();
}

// A function that you can pass a percentage as
// a whole number and it will generate the
// appropriate new div's to overlay the
// current ones:

function update_progress($percent) {
  // First let's recreate the percent with
  // the new one:
  echo "<div class='per'>{$percent}
    %</div>\n";

  // Now, output a new 'bar', forcing its width
  // to 3 times the percent, since we have
  // defined the percent bar to be at
  // 300 pixels wide.
  echo "<div class='bar' style='width: ",
    $percent * 3, "px'></div>\n";

  // Now, again, force this to be
  // immediately displayed:
  flush();
}

// Ok, now to use this, first create the
// initial bar info:
create_progress();

// Now, let's simulate doing some various
// amounts of work, and updating the progress
// bar as we go. The usleep commands will
// simulate multiple lines of code
// being executed.
usleep(350000);
update_progress(7);
usleep(1550000);
update_progress(28);
usleep(1000000);
update_progress(48);
usleep(1000000);
update_progress(68);
usleep(150000);
update_progress(71);
usleep(150000);
update_progress(74);
usleep(150000);
update_progress(77);
usleep(1150000);
update_progress(100);

// Now that you are done, you could also
// choose to output whatever final text that
// you might wish to, and/or to redirect
// the user to another page.
?>

I am new at this and if you can help with providing code to make this disappear after loading 100% I would appreciate it.

Thanks in advance,
Ernie

bradgrafelman

Moved to ClientSide Technologies forum since this question doesn't pertain to PHP.

johanafm

Wrap your 50 divs in one container and

<body onload="removeBar();">

function removeBar() {
	var bar = document.getElementById('id_of_bar_container');
	bar.parentNode.removeChild(bar);
}

amused2deathorg

Ok, I have played around with the code with no luck in getting it to work. Now maybe since I'm not experienced at all with using php I can try a more simple approach,, that is if this is.

<?php
// Output a 'waiting message'
echo 'Please wait while this task completes';

// Now while waiting for a certain task to
// complete, keep outputting .'s

while (true) {
  // Echo an extra dot, and flush the buffers
  // to ensure it gets displayed.
  echo ' .';
  flush();

  // Now sleep for 1 second and check again:
  sleep(1);
}
?>

Now this page tells me this:

Of course in this example you would need to replace the while (true) statement with the actual check you are using to see when the task is done. This could be checking for the creation of a file in the file system, or checking the output of a program or web page. It could even be polling on input from another process—whatever method you have for checking this.

Can someone tell me how I would make this kick over to the actual page after loading.

This is the page I am trying to get this to work on:
a2d photos

I would like visitors to know that the page is working. Can you johanafm or someone else help me out on what I need to replace in the (true) part to have the "Please wait while this task completes" disappear after all photos load?

Sorry, but I really did try to make your code work for me with no luck.

Thank you for your time,
Ernie