Мне нужно сделать индикатор загрузки Bootstrap, который заполнен градиентным цветом (скажем, от красного к зеленому). Мой CSS в настоящее время выглядит так:

.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%);
}

и HTML, чтобы пойти с этим, это:

    <div class="progress progress-lf">
            <div class="progress-bar gradient" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: <?php echo mt_rand(0,100);?>%;">
                    <span>60% Complete</span>
            </div>
    </div>

Это отображает градиент, но для приведенного выше примера (60%) отображает весь спектр цветов градиента в активной области 60%. Мне нужно изменить это так, чтобы (например) для 60% отображалось только 60% градиентного цветового спектра.

У кого-нибудь есть идеи, как этого добиться? Я бы предпочел чисто CSS-решение, но если для этого требуется jQuery, это тоже будет хорошо.