CSS3 reverse progress

Question

I have an EXAMPLE .

I want to reverse the progress bar 180 degrees to move back and forth. To get something like this:

I tried to change the transition attribute, but there was no result.

Code:

.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

Make a run block and just place it to the right:

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

Demo

Answer 2

Make span a block element and use margin-left . But you also need to reverse the progress. For instance. 30% margin-left:70% needs margin-left:70% ;

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