Note: It's simple to change the percentage and bar length:
0% @ 100px
25% @ 150px
50% @ 200px
75% @ 250px
100% @ 300px
Unfortunately, we all know what progress bars are. As annoying as it is to sit and
stare at one, it's better then sitting there waiting for a program to do something
without knowing if it's frozen or not. While HTTP doesn't offer the same level of
interactivity as a desktop application, there are still instances where a progress
bar type display can be useful. One example that comes to mind is displaying the
amount of used space on a server's hard drive. Anyway... if you're here you
probably already know what you want to use it for... now to the code.
While the different versions are relatively similar, they do fall into two different categories
which I (for lack of better terms) will call smooth and chunked. The smooth ones are simpler in concept.
Simply stretch an HTML element or image to the correct size and that's it. The chunked ones end up being
less precise and require a little bit of calculation to determine how many of the "chunks" should be filled
and how many should be empty.
Since they're all fundamentally the same, I was going to wrap all the different versions into one
subroutine, but since most people will probably choose the one they like and discard the rest, keeping
them in independent subs seemed to make more sense.
The images used in this sample can be downloaded from here: progressbar_images.zip (3 KB)
