in reply to Timer - Progress Bar

"Real" progress bars are quite tricky, and I tend to avoid them. One trick I've used for this is as follows (untested code): 

#!/usr/bin/perl -wT
use strict;
use CGI;
$|=1; # turn of output buffering..

# do some setup stuff, and print HTML headers here

# display a simple (looped & animated) "loading" image
print <<ENDHTML;
<img src="loading.gif" name="loading">
ENDHTML

# load stuff from the database...

print <<ENDHTML;
<script language="JavaScript">
<!--
  document.images['loading'].src = 'empty.gif';
//-->
</script>
ENDHTML

# print output

[download]
You could also use CSS to put something else over the message after your done, which should eliminate the need for javascript. Adapt as you like.
"What should it profit a man, if he should win a flame war, yet lose his cool?"

Replies are listed 'Best First'.
Re^2: Timer - Progress Bar
by radiantmatrix (Parson) on Dec 13, 2004 at 14:46 UTC

    Since JS tends to be problematic -- my current client requires it be turned off, for example -- here's an idea of how to acccomplish this with CSS. 

    /* Stylesheet Snippet */

.pbcont {
   background-color: #000;
   height: 20px;
   width: 250px;
   border: 1px solid #00c;
   margin: 0;
   padding: 0;
}

.pbarchunk {
   margin: 0;
   margin-right: 2px;
   padding: 0;
   background-color: #00c;
   width: 23px;
   height: 20px;
}

    [download]
    #!/usr/bin/perl

use CGI; 
# Do CGI stuff
# Print a lot of the HTML;

print "<div class='pbcont'>";
while ($new_val < 100) {
   $new_val = &update();  # get the updated progress
   next unless $new_val > $old_val;
   print "<div class='pbar'> </div>";
}
print "</div>\n";

    [download]

    This is untested, but the basic idea is that writing the DIVs will cause colored blocks to appear inside a bordered bar. One could also get a lot more complicated, dealing with fractional percentages, absolute CSS positioning to make the progress bar go away, and other neat little tricks.

    Of course, if all you're interested in is letting the user know "something is happenning", you can use the parent post's idea with an animated GIF. This is basically what sites like PriceLine and the like use.

    radiantmatrix
    require General::Disclaimer;
    s//2fde04abe76c036c9074586c1/; while(m/(.)/g){print substr(' ,JPacehklnorstu',hex($1),1)}

[reply]
[d/l]
[select]
Re^2: Timer - Progress Bar
by simonm (Vicar) on Dec 13, 2004 at 18:42 UTC
    A related technique is to have the initial request not actually do any work but just return a page with the animated "loading..." image and a refresh header/metatag that causes the browser to issue another request for the "real" page; that second page can take as long as needed to generate the results which will then replace the first page.
[reply]
Re^2: Timer - Progress Bar
by Anonymous Monk on Dec 13, 2004 at 19:42 UTC
    Actually the trick here worked with out a problem, and with out any complexity, just needed a little work.
    Thank you!
[reply]
      I would love to see your final version. I am looking for a simple (and actual) upload progress bar for a working group that exchanges large jpg's and cad files.
[reply]
Re^2: Timer - Progress Bar
by Anonymous Monk on Nov 19, 2013 at 06:09 UTC
    A nice sharing.
[reply]

In Section Seekers of Perl Wisdom