我需要制作一个由渐变颜色填充的Bootstrap进度条(让我们说红色到绿色)。我的CSS目前看起来像这样：
.progress-lf {
position: relative;
height: 31px;
background-color: rgba(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,#5FB365 100%);
background-image: -o-linear-gradient(left,#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,#5FB365 100%);
background-image: linear-gradient(to right,#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来实现这一点，那也是可以的。
解决方法
为了让你动态地改变’amount’，我建议使用jquery(或者是vanilla js，以优先选择)来调整进度条。
我已经使用了data-attribute来完成进度条的值以及文本(所以你只需要在一个地方更改它)。
这意味着你所要做的就是改变
data-amount
属性为0到100％之间的值。
演示
$(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);
background: -moz-linear-gradient(left,rgba(255,1) 0%,rgba(0,255,1) 100%);
background: -webkit-gradient(linear,color-stop(0%,1)),color-stop(100%,1)));
background: -webkit-linear-gradient(left,1) 100%);
background: -o-linear-gradient(left,1) 100%);
background: -ms-linear-gradient(left,1) 100%);
background: linear-gradient(to right,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而不是实际使用。
