使用 CSS3 反转进度条

Question

我有这个示例。

我想将进度条反转 180 度，从右向左进度。 要获得这样的东西：

我尝试更改 transition 属性，但没有结果。

代码：

.progress-bar span {
        display: inline-block;
        height: 100%;
        background-color: #777;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        transition: width .4s ease-in-out;      
}

Answer 1

制作进度条块并将其向右浮动：

.progress-bar span {
    display: block;
    float: right;
    ...
}

演示

Answer 2

将 span 设为块元素并使用

margin-left

。但你也需要扭转进展。例如。 30% 需要

margin-left:70%

;

http://jsfiddle.net/fmaGZ/2/

Answer 3

拥有

<progress class="progress" />

html 标签，您可以使用：

.progress {
  direction: rtl;
}