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

Question

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

Answer 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>

это реально только с помощью двух элементов, так должно быть довольно хорошее представление мудрым.

ПРИМЕЧАНИЕ

Там, кажется, совсем немного JQuery, используемый в этом ответе; и это связано с DEMO, а не с фактическим использованием.

Answer 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 будет виден через прозрачный фон в прогресс-бар.

Но вне прогресс-бара, он будет замаскирован тени