5 
 dd { /*position: relative; /* IE is dumb */ display: block; float: left; width: 500px; height: 16px; margin: 0 0 2px; background: url("white3.gif"); } dd div.blue { /*position: relative; */ background: url("blue.gif"); height: 16px; width: 75%; text-align:right; display:block; }

HTML:

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

This creates a white bar and fills it with blue 35%.

Now I would like to fill the SAME progress bar with two different values. For example, if value A was 30% and value B was 40%, 70% of the bar would be filled, but the percentage of each could be seen by a difference in colors. Value A and B can come in any order on the bar, as long as I can tell there are two different things and "see" how much each one is taking up.

Any suggestions?

Thanks.

Improve this question

4 Answers 4

Reset to default
11

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).

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Yes. Thank You. That is a very clean way to do it.
0

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.

Improve this answer

1 Comment

Example? The values will be changing every few minutes so moving the second one over right will not work when say the 1st value goes down to 5% I would need value B to "append".
0 
<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.

Improve this answer

Comments

-1 
<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%');
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.