html 纵向进度条,垂直CSS / HTML5进度条(Vertical CSS/HTML5 progress bar)

垂直CSS / HTML5进度条(Vertical CSS/HTML5 progress bar)

我正在寻找一个垂直条，可以改变百分比类型的百分比，但以垂直格式显示，我成功地获得了一个使用此工具的水平工具： CSS Progress Bar，但现在我想仿效但垂直。

这是竖线的代码：

.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'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: CSS Progress Bar but now I would like to emulate that but vertically.

This is the code for the vertical bar:

.score {

width:34px;

height:141px;

background: url(/assets/images/accordion/score.png) no-repeat 0 0px;

}

.score-completed {

width:2