Reverse Progressbar Using CSS3

I have this EXAMPLE. I want to reverse the progress bar 180 degree to progress from right to left. To obtain something like this : I tried to change the transition attribute but

Solution 1:

Make the progress bar block and just float it to the right:

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

DEMO

Solution 2:

Make the span a block element and use margin-left. But you need to inverse the progress as well. E.g. 30% needs margin-left:70%;

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