Индикатор выполнения бутстрапа с градиентным цветом, показывающий пропорционально активной ширине

Мне нужно сделать индикатор выполнения 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, это также будет нормально.

Ответы

Ответ 1

Чтобы динамически изменять "количество", я бы предложил использовать jquery (или vanilla js, в зависимости от того, что предпочтительнее), чтобы настроить индикатор выполнения.

Я использовал атрибут data, чтобы завершить значение индикатора выполнения, а также текст (так что вам нужно только изменить его в одном месте).

Это означает, что все, что вам нужно сделать, это изменить

data-amount

при значении от 0 до 100%.

Demo

 $(document).ready(function () {
    var dataval = parseInt($('.progress').attr("data-amount"));
    if (dataval < 100) {
        $('.progress .amount').css("width", 100 - dataval + "%");
    }

  /*FOR DEMO ONLY*/
    $('#increase').click(function () {
        modifyProgressVal(1);
    });
    $('#decrease').click(function () {
        modifyProgressVal(-1);
    });
    function modifyProgressVal(type) {
        dataval = parseInt($('.progress').attr("data-amount"));
        if (type == 1) dataval = Math.min(100,dataval + 10)
        else if (type == -1) dataval = Math.max(0,dataval - 10);
        $('.progress .amount').css("width", 100 - dataval + "%");
        $('.progress').attr("data-amount", dataval);
    }
});
.progress {
  position: relative;
  height: 31px;
  background: rgb(255, 0, 0);
  background: -moz-linear-gradient(left, rgba(255, 0, 0, 1) 0%, rgba(0, 255, 0, 1) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 0, 0, 1)), color-stop(100%, rgba(0, 255, 0, 1)));
  background: -webkit-linear-gradient(left, rgba(255, 0, 0, 1) 0%, rgba(0, 255, 0, 1) 100%);
  background: -o-linear-gradient(left, rgba(255, 0, 0, 1) 0%, rgba(0, 255, 0, 1) 100%);
  background: -ms-linear-gradient(left, rgba(255, 0, 0, 1) 0%, rgba(0, 255, 0, 1) 100%);
  background: linear-gradient(to right, rgba(255, 0, 0, 1) 0%, rgba(0, 255, 0, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#00ff00', GradientType=1);
}
.amount {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  transition: all 0.8s;
  background: gray;
  width: 0;
}
.progress:before {
  content: attr(data-amount)"% Complete";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  text-align: center;
  line-height: 31px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="progress" data-amount="80">
  <div class="amount"></div>
</div>


<!--FOR DEMO ONLY-->

<button id="increase">Increase by 10</button>
<button id="decrease">Decrease by 10</button>

Ответ 2

Измените элемент, у которого есть градиент, от индикатора выполнения до достижения прогресса.

А. чтобы замаскировать его, используйте белую рамку-тень на панели выполнения.

Необходимые изменения для стиля:

.progress {
  background-image: linear-gradient(to right, #FFF, #00F);
}

.progress-bar {
  box-shadow: 0px 0px 0px 2000px white;   /* white or whatever color you like */
  background-image: none !important;
  background-color: transparent !important;
}

Градиент в .progress будет виден через прозрачный фон в полосе прогресса.

Но за пределами полосы выполнения она будет замаскирована теневым