垂直CSS/HTML5进度条

Question

我希望有一个垂直条,我可以改变百分比条的百分比,但是在垂直格式中,我已经成功地使用它来获得一个水平的工作:CSS Progress 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 */
}

Answer 1

我不明白为什么你不应该建立自己的 - 以下是我的尝试,并没有在IE上测试,但它应该适用于所有现代浏览器:

#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;
}

这里的基本思想是使用绝对定位的divs将杆中的每个元素移动到位 - div顶部的最里面部分获得圆顶,位于进度条的顶部top: 0,而进度条本身是底部对齐的与bottom: 0.

我在这里设置了一个简单的演示:http://www.jsfiddle.net/sNLXn/.该演示使用边框和背景来演示进度条,但真实的应该使用图像.