bryan wann :: binary fury

It’s the small victories that make life interesting. I’ve been writing a couple of web tools at work that run off to do a bunch of SNMP polling of a device and display the results. On big devices, particularly overseas, this can take several seconds to finish. In the meantime the browser throbber is throbbing away in front of the user. I can use Mason’s $m->flush_buffer to flush output as I go, but I wanted a solid indicator as to when all the heavy lifting was finished.

I found this on Adrian Ber’s blog that demonstrates a simple CSS+javascript progress bar. While neat, it wasn’t immediately obvious to me how I could push progress counters from my web app to the Javascript to manipulate the div tags since I’m not a web app pro. There were other pure CSS examples out there, but they depended on absolute positioning on a page. This easily gets in the way when layout changes or text is added/removed. I also didn’t want to do client-side polling because that artificially increases overall render time, nor does the client know how many rows are coming. Then it finally dawned on me I could call <script>setPercent();<script> in my page output between groups of table rows.

Using Ber’s CSS, a quick example in Mason looks like:

% for ( my $i = 0; $i <= 100; $i+=5 ) {
<script>setPercent(<% $i %>);</script>
%  $m->flush_buffer;
%  sleep 1;
% }

The end result is here: the hurr durr meter. If you want really fancy Apple-style progress bars, throw in an animated .gif from ajaxload.info and you get: this.

Tags: css, javascript, mason