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