title: Reverse progressbar using CSS3
body: <p>I have this <a href="http://jsfiddle.net/Mils/fmaGZ/1/" rel="nofollow noreferrer"><strong>EXAMPLE</strong></a>.</p>
  
  <p>I want to reverse the progress bar 180 degree to progress from right to left. 
  To obtain something like this :</p>
  
  <p><img src="https://i.stack.imgur.com/cclqS.png" alt="enter image description here"></p>
  
  <p>I tried to change the <strong>transition</strong> attribute but no result.</p>
  
  <p>Code :</p>
  
  <pre><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;      
  }
  </code></pre>