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:
我需要制作一个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%);
}
and the HTML to go with it is this:
和它一起使用的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>
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.
这会显示渐变,但对于上面的示例(60%),它会在活动的60%区域中显示整个渐变色谱。我需要更改它,以便(例如)60%,只显示60%的渐变色谱。
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.
有人对如何实现这个有任何想法吗?我更喜欢纯CSS解决方案,但如果需要jQuery来实现这一点,那也没关系。
2 个解决方案
#1
26
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.
为了让你动态改变'金额',我建议使用jquery(或vanilla js,无论哪个是首选)来调整进度条。
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).
我使用了data-attribute来完成进度条的值以及文本(所以你只需要在一个地方更改它)。
This means that all you have to do is change the
这意味着您所要做的就是改变
data-amount
attribute to a value between 0 and 100%.
属性为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>
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.
在这个答案中似乎有相当多的jQuery使用;这是由于DEMO而非实际使用。
#2
2
Modify the element that has the gradient, from progress-bar to progress.
修改具有渐变的元素,从progress-bar到progress。
And. to mask it, use a white box-shadow on progress-bar.
和。要掩盖它,在进度条上使用白色框阴影。
Changes required to the style:
风格所需的变化:
.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;
}
The gradient in .progress will be visible thru the transparent background in progress-bar.
.progress中的渐变将通过进度条中的透明背景可见。
But outside the progress-bar, it will be masked by the shadow
但在进度条之外,它将被阴影蒙蔽
#1
26
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.
为了让你动态改变'金额',我建议使用jquery(或vanilla js,无论哪个是首选)来调整进度条。
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).
我使用了data-attribute来完成进度条的值以及文本(所以你只需要在一个地方更改它)。
This means that all you have to do is change the
这意味着您所要做的就是改变
data-amount
attribute to a value between 0 and 100%.
属性为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>
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.
在这个答案中似乎有相当多的jQuery使用;这是由于DEMO而非实际使用。
#2
2
Modify the element that has the gradient, from progress-bar to progress.
修改具有渐变的元素,从progress-bar到progress。
And. to mask it, use a white box-shadow on progress-bar.
和。要掩盖它,在进度条上使用白色框阴影。
Changes required to the style:
风格所需的变化:
.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;
}
The gradient in .progress will be visible thru the transparent background in progress-bar.
.progress中的渐变将通过进度条中的透明背景可见。
But outside the progress-bar, it will be masked by the shadow
但在进度条之外,它将被阴影蒙蔽