• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1888
  • Last Modified:

HTML Progress Bar Percent

I want to do a progress bar using HTML. I have two images, like an old thermometer--one empty and one full. These are overlapped, and the full one grows from 0 to 100% as the procedure advances, filling up the tube. They are oriented horizontally. The hard part: I also want to show the percent complete in the center, on top of the images.
1 Solution
You might need to manipulate your timers. Failing which, use a Javascript.
DanOBrien57Author Commented:
I resolved it myself. I use two TDs in a TABLE, each with a different background image and changing their relative widths as time progresses. The overlaid percent is done using a layered DIV with absolute positioning setting the z-order above the TDs. I've included a code snippet.
#PctLayer {POSITION:absolute; VISIBILITY:visible; TOP:0px; left:0px; 
            width:250px; height:48px; Z-INDEX:2} 
<table width="100%" style="height:16px;" cellpadding="0px" cellspacing="0px">
    <td style="width:25%;"></td>
    <td align="center" style="width:15%; background-image:url('progress_lit.jpg');"></td>
    <td align="center" style="width:35%; background-image:url('progress_back.jpg');"></td>
    <td style="width:25%;"></td>
<div id="PctLayer" style="top:130px; left:600px; color:#333333; font-size:small; font-family:Arial;">30%</div>

Open in new window


Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now