Progress bar in HTML/CSS

Question

 dd { 
    /*position: relative; /* IE is dumb */
    display: block;                 
    float: left;     
    width: 500px; 
    height: 16px; 
    margin: 0 0 2p         


        

Answer 1

I suggest layering another bar over it and shifting it left/right as needed.

If the bars aren't supposed to stretch the length of the viewport, you could put them in a div with overflow:hidden to keep the illusion intact.

Edit:

I just figured out why I wanted to do it that way and not follow what you'd started. When I did something similar before, it was using images, where changing the width of course have mangled the overlaying image.

With just plain colors, I'm sure you could get away with just using the size. But I'd still use CSS to layer one over the other.

Answer 2

<div class="progressbar">
   <div class="inner1" style="width: 30%; background-color: blue;"><b>Value A</b></div>
   <div class="inner2" style="width: 40%; background-color: red;"><b>Value B</b></div>
</div>

Then the CSS:

.progressbar {
   background-color: #1e1e1e;
   color: white;
   height: 25px;
   width: 115px;
}
.inner1, .inner2 {
   height: 100%;
   /* Change width with javascript */
}

If you just want one value in a progress bar, there is a tutorial here.

Answer 3

<div style="height: 5px; background-color: green; width: 100%;">
    <div id="progress_bar" style="height: 5px; background-color: red; width: 10%;"></div>
</div>  

And after that:

$('#progress_bar').css('width', '30%');

Answer 4

Are you looking for something like this?

CSS:

div.dd { 
   /*position: relative; /* IE is dumb */
    display: block;                 
    float: left;     
    width: 500px; 
    height: 16px; 
    margin: 0 0 2px; 
    background: #fff; 
}

div.dd div.blue { 
    /*position: relative; */
    background: #00f; 
    height: 16px; 
    width: 75%; 
    text-align:right; 
    display:block;
    float: left;
}
div.dd div.red { 
    /*position: relative; */
    background: #f00; 
    height: 16px; 
    width: 75%; 
    text-align:right; 
    display:block;
    float: left;
}

HTML:

<div class="dd">
    <div class="blue" style="width:35%;"></div>
    <div class="red" style="width:10%;"></div>
</div>

I'm not sure why you're using the dd tag (for me, this tag causes the divs to render beneath the dd tag, rather than inside).