使用CSS3反向进度条

我有这个例子 。

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

我试图改变过渡属性，但没有结果。

代码：

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

DEMO

Answer 2

使span成为块元素并使用margin-left 。 但是你也需要反转进度。 例如30％需要margin-left:70% ;

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