title: CSS gradient: simulate progress bar
body: <p><img src="https://i.stack.imgur.com/5r2k1.png" alt="enter image description here"></p>
  
  <p>Trying to simulate this progress bar using css. It has two backgrounds and one of the backgrounds should only cover a part of the bar, behind the text. The width of it should be easy to manipulate to change the %. 
  I started with the a full bar, but really not sure how add the percentage part to it. Is it possible to do without absolute positioning? </p>
  
  <pre><code>&lt;div class="bar"&gt;
      Progress: 60%
  &lt;/div&gt;
  
  .bar {
      border: 1px solid black;
      color: white;
      display: table-cell;
      width: 250px;
      height: 50px;
      text-align: center;
      vertical-align: middle;        
      background: #003458;
      background: -moz-linear-gradient(top, #003458 0%, #001727 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#003458), color-stop(100%,#001727));
      background: -webkit-linear-gradient(top, #003458 0%,#001727 100%);
      background: -o-linear-gradient(top, #003458 0%,#001727 100%);
      background: -ms-linear-gradient(top, #003458 0%,#001727 100%);
      background: linear-gradient(to bottom, #003458 0%,#001727 100%);
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/hMRyy/4/" rel="nofollow noreferrer">Fiddle</a></p>