Vertical CSS/HTML5 progress bar

I'm looking to have a vertical bar that I can change the percent of kind of like a percent bar but in vertical format, I have succeeded in getting a horizontal one to work using this: CS开发者_如何学运维S Progress Bar but now I would like to emulate that but vertically.

Is there a way that I can do this.

This is the code for the vertical bar:

<div class="score">
<div id="test" class="score-completed" style="height:80;">
<div>&nbsp;</div>
</div>
</div>

.score {
width:34px;
height:141px;
background: url(/assets/images/accordion/score.png) no-repeat 0 0px;
}
.score-completed {

width:26px;
margin-left: -1px;
background: url(/assets/images/accordion/score.png) no-repeat 1px 0;
}
.score-completed div {
float: right;
height: 50%;
width:26px;
margin:99px 1px 0 0;
background: url(/assets/images/accordion/score.png) no-repeat 100% 100%;
display: inline; /* IE 6 double float bug */
}

---

I don't see why you shouldn't build your own - the following is my attempt, and has not been tested on IE, but it should work for all modern browser:

#outer {
    width: 30px;
    height: 140px;
    overflow: hidden;

    position: relative;
}

#inner, #inner div {
    width: 100%;
    overflow: hidden;
    position: absolute;
}

#inner {
    bottom: 0;
    height: 0%;
}

#inner div {
    top: 0;
    width: 100%;
    height: 5px;
}

The basic idea here is to use absolutely positioned divs to shift each element in the bar into position - the innermost div for the top part to get the round top, positioned to the top of the progress bar with top: 0, while the progress bar itself is bottom aligned with bottom: 0.

I've set up a simple demo here: http://www.jsfiddle.net/sNLXn/. The demo uses border and background to demonstrate the progress bar, but the real thing should use images instead.

---

I don't know if this is what you need but:

You can change the height of css rule .score-completed div from percentage (currently 50%) to fixed height with px (for this example 40px). Then when you have to make bigger the green bar you can add pixels in the height and delete the same amount of pixels from margin (currently 99px).

For example if you want the height to be 49px then the margin must be 90px (-9 pixels because you added in the height).

edit: you can add an id to each div with the bar and then create a css rule.

For example:

<div class="score">
<div id="test" class="score-completed" style="height:80;">
<div id="first">&nbsp;</div>
</div>
</div>
<div class="score">
<div id="test" class="score-completed" style="height:80;">
<div id="second">&nbsp;</div>
</div>
</div>

Then you remove the height and margin:99px from your .score-completed div and create new css rules for each bar for example:

#first {margin:99px 1px 0 0; height:40px; }
#second {margin:90px 1px 0 0; height:49px; }