Geek Answers Handbook

HTML / CSS progress bar

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 streak and fills it with 35% blue.

Now I would like to populate the SAME progress bar with two different values. For example, if the value of A was 30% and the value of B was 40%, 70% of the bar would be filled, but the percentage of each of them could be seen by the color difference. The values ​​A and B can come in any order on the panel, if I can say that there are two different things and "see" how much each of them is busy.

Any suggestions?

Thanks.

+4
source share
4 answers

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 are using the dd tag (for me, this tag forces divs to display under the dd tag, not inside).

+12
source

I suggest putting another bar over it and moving it left / right as needed.

If the stripes should not stretch the length of the viewport, you can put them in a div with overflow: hidden to keep the illusion intact.

Edit:

I just realized why I wanted to do it this way, and not follow what you started. When I did something similar before, he used images where the change in width, of course, distorted the overlay image.

With simple colors, I'm sure you could get away just by using size. But I still use CSS to align one over the other.

0
source 
 <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 CSS:

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

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

0
source 
 <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%');
-1
source

More articles:


All Articles