使用CSS3的反向進度條

Question

我有這個EXAMPLE。

我想將進度條反轉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

使跨度塊元素，並使用margin-left。但是你也需要反轉進度。例如。 30％需要margin-left:70%;

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