Bootstrap进度条，渐变颜色在活动宽度上按比例显示

我需要制作一个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-bar gradient" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: %;"> 60% Complete

这会显示渐变，但对于上面的示例（60％），它会在活动的60％区域中显示整个渐变色谱。 我需要更改它，以便（例如）60％，只显示60％的渐变色谱。

有人对如何实现这个有任何想法吗？ 我更喜欢纯CSS解决方案，但如果需要jQuery来实现这一点，那也没关系。

为了让你动态改变’金额’，我建议使用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, 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; }

修改具有渐变的元素，从progress-bar到progress。

和。 要掩盖它，在进度条上使用白色框阴影。

风格所需的变化： 

 .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; }

.progress中的渐变将通过进度条中的透明背景可见。

但在进度条之外，它将被阴影蒙蔽

Interesting Posts

如何在JavaScript中将px转换为vw？

对于移动设备，我如何暂时阻止jQuery触摸事件，然后重新激活它们？

CSS flex最后一个不完整的行项占用完整行项的宽度

如何在背景大小的div上缩放背景图像

如何从卡片或类似物品获取标题与弹性盒子具有相同的高度？

如何在不使用css转换的情况下将jQuery动画与css3属性结合起来？

CSS – 如何让一个相对元素跟我上下，但不是左右？

在jQuery中替换图像扩展，动态从.png到.gif

将垂直滚动添加到水平滚动条

按宽度排列Bootstrap Carousel项目。