Bootstrap进度条，渐变颜色按比例显示在有效宽度上 [英] Bootstrap progress bar with gradient color showing proportionally on active width
问题描述
我需要制作一个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来实现这一点，那也可以.
为了让您动态地更改金额"，我建议使用jquery(或vanilla js，以较优者为准)来调整进度条./p>
我使用数据属性来完成进度条和文本的值(因此您只需要在一个地方进行更改)即可.
这意味着您要做的就是更改
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, 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而不是实际使用.
I need to make a Bootstrap progress bar which is filled by a gradient color (lets say red to green). My CSS currently looks like this:
.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%);
}
and the HTML to go with it is this:
<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>
This displays the gradient but for the above example (60%), it displays the entire gradient color spectrum across the active 60% region. I need to change this so that (for example) for 60%, only 60% of the gradient color spectrum are displayed.
Anybody have any ideas on how to achieve this? I'd prefer a pure CSS solution but if jQuery is required to achieve this, that would also be OK.
In order for you to dynamically alter the 'amount', I would suggest using jquery (or vanilla js, whichever is preferred) to adjust the progress bar.
I have used the data-attribute in order to complete the value of the progress bar, as well as the text (so you only need to change it in one place).
This means that all you have to do is change the
data-amount
attribute to a value between 0 and 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>
this realistically is only using two elements, so should be pretty good performance wise.
NOTE
There seems to be quite a bit of jQuery used in this answer; and this is due to the DEMO and not actual use.
这篇关于Bootstrap进度条，渐变颜色按比例显示在有效宽度上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
