title: Bootstrap progress bar with gradient color showing proportionally on active width
body: <p>I need to make a Bootstrap progress bar which is filled by a gradient color (lets say red to green). My CSS currently looks like this: </p>
  
  <pre><code>.progress-lf {
      position: relative;
      height: 31px;
      background-color: rgba(51, 51, 51, 0.4)
  }
  
  .progress-lf span {
      position: absolute;
      display: block;
      font-weight: bold;
      color: #d2d2d2;
      width: 100%;
      top:6px;
  }
  
  .progress-lf .gradient {
      background-color: transparent;
      background-image: -ms-linear-gradient(left, #E34747 0%, #5FB365 100%);
      background-image: -moz-linear-gradient(left, #E34747 0%, #5FB365 100%);
      background-image: -o-linear-gradient(left, #E34747 0%, #5FB365 100%);
      background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #E34747), color-stop(100, #5FB365));
      background-image: -webkit-linear-gradient(left, #E34747 0%, #5FB365 100%);
      background-image: linear-gradient(to right, #E34747 0%, #5FB365 100%);
  }
  </code></pre>
  
  <p>and the HTML to go with it is this: </p>
  
  <pre><code>    &lt;div class="progress progress-lf"&gt;
              &lt;div class="progress-bar gradient" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: &lt;?php echo mt_rand(0,100);?&gt;%;"&gt;
                      &lt;span&gt;60% Complete&lt;/span&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>This displays the gradient but for the above example (60%), it displays the entire gradient color spectrum across the active 60% region. I need to change this so that (for example) for 60%, only 60% of the gradient color spectrum are displayed. </p>
  
  <p>Anybody have any ideas on how to achieve this? I'd prefer a pure CSS solution but if jQuery is required to achieve this, that would also be OK.</p>