带有渐变颜色的 Bootstrap 进度条在活动宽度上按比例显示 [英] Bootstrap progress bar with gradient color showing proportionally on active width

问题描述

我需要制作一个由渐变颜色填充的 Bootstrap 进度条(比方说红色到绿色).我的 CSS 目前看起来像这样:

.progress-lf {位置:相对；高度:31px；背景颜色:rgba(51, 51, 51, 0.4)}.progress-lf 跨度{位置:绝对；显示:块；字体粗细:粗体；颜色:#d2d2d2；宽度:100%；顶部:6px；}.progress-lf .gradient {背景色:透明；背景图像:-ms-线性梯度(左，#E34747 0%，#5FB365 100%)；背景图像:-moz-线性梯度(左，#E34747 0%，#5FB365 100%)；背景图像:-o-线性梯度(左，#E34747 0%，#5FB365 100%)；背景图像:-webkit-gradient(线性，左上，右上，色标(0，#E34747)，色标(100，#5FB365))；背景图像:-webkit-线性梯度(左，#E34747 0%，#5FB365 100%)；背景图像:线性渐变(向右，#E34747 0%，#5FB365 100%)；}

和它一起使用的 HTML 是这样的:

 
<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% 完成</span>

这会显示渐变，但对于上面的示例 (60%)，它会显示整个 60% 活动区域的整个渐变色谱.我需要对此进行更改，以便(例如)对于 60%，仅显示 60% 的渐变色谱.

有人对如何实现这一目标有任何想法吗?我更喜欢纯 CSS 解决方案，但如果需要 jQuery 来实现这一点，那也可以.

解决方案

为了让您能够动态更改数量"，我建议您使用 jquery(或 vanilla js，以首选)来调整进度条.

为了完成进度条的值，以及文本(所以你只需要在一个地方改变它)，我已经使用了数据属性.

<小时>

这意味着你所要做的就是改变

数据量

属性为 0 到 100% 之间的值.

<小时>

演示

 $(document).ready(function () {var dataval = parseInt($('.progress').attr("data-amount"));如果(数据值<100){$('.progress .amount').css("width", 100 - dataval + "%");}/*仅用于演示*/$('#increase').click(function () {修改进度值(1)；});$('#decrease').click(function () {修改进度值(-1)；});函数修改进度值(类型){dataval = parseInt($('.progress').attr("数据量"));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("数据量", dataval);}});

.progress {位置:相对；高度:31px；背景:rgb(255, 0, 0);背景:-moz-linear-gradient(left, rgba(255, 0, 0, 1) 0%, rgba(0, 255, 0, 1) 100%);背景:-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 0, 0, 1)), color-stop(100%, rgba(0, 255, 0, 1))));背景:-webkit-linear-gradient(left, rgba(255, 0, 0, 1) 0%, rgba(0, 255, 0, 1) 100%);背景:-o-linear-gradient(left, rgba(255, 0, 0, 1) 0%, rgba(0, 255, 0, 1) 100%);背景:-ms-linear-gradient(left, rgba(255, 0, 0, 1) 0%, rgba(0, 255, 0, 1) 100%);背景:线性梯度(向右，rgba(255, 0, 0, 1) 0%, rgba(0, 255, 0, 1) 100%)；过滤器:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#00ff00', GradientType=1);}.数量 {位置:绝对；顶部:0；右:0；高度:100%；过渡:全0.8s；背景:灰色；宽度:0；}.progress:before {内容:attr(data-amount)"% Complete";位置:绝对；顶部:0；左:0；宽度:100%；高度:100%；z-索引:10；文本对齐:居中；行高: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>

<!--仅用于演示--><button id="increase">增加 10</button><button id="decrease">减少 10</button>

这实际上只使用了两个元素，因此在性能方面应该是相当不错的.

注意

这个答案中似乎使用了相当多的 jQuery；这是由于演示而不是实际使用.

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屋！