HTML Progress Bar Percent

Posted on 2009-04-20
Last Modified: 2012-06-21
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.
Question by:DanOBrien57
    LVL 3

    Expert Comment

    You might need to manipulate your timers. Failing which, use a Javascript.

    Accepted Solution

    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} 
    <h1>DUMMY TEST PAGE</h1>
    <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


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    What Is Threat Intelligence?

    Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

    If I have to fix slow responding website my first thoughts are server side optimizations: the database may not be optimized or caching is not enabled, or things like that. We often overlook another major part of our web application: the client. We o…
    Introduction A frequently used term in Object-Oriented design is "SOLID" which is a mnemonic acronym that covers five principles of OO design.  These principles do not stand alone; there is interplay among them.  And they are not laws, merely princ…
    Use Wufoo, an online form creation tool, to make powerful forms. Learn how to selectively show certain fields based on user input using rules to gather relevant information and data from your forms. The rules feature provides you with an opportunity…
    Use Wufoo, an online form creation tool, to make powerful forms. Learn how to choose which pages of your form are visible to your users based on their inputs. The page rules feature provides you with an opportunity to create if:then statements for y…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    13 Experts available now in Live!

    Get 1:1 Help Now