具有渐变颜色的引导进度条在活动宽度上按比例显示

Posted

技术标签:

【中文标题】具有渐变颜色的引导进度条在活动宽度上按比例显示【英文标题】:Bootstrap progress bar with gradient color showing proportionally on active width 【发布时间】:2015-06-13 17:15:35 【问题描述】:

我需要制作一个由渐变颜色填充的 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 来实现这一点,那也可以。

【问题讨论】:

【参考方案1】:

为了让您动态更改“金额”,我建议使用 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;
<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;这是由于演示而不是实际使用。

【讨论】:

我希望你能理解它是如何工作的,但完全没有问题:) 是否有任何理智的方法可以重新编码以通过一些 jQuery 魔术而不是 CSS 属性来处理文本 + 百分比。我需要将输出国际化,这样有点痛苦。我试过了,但只是弄乱了文本的位置/格式。 @user13955:你的意思是像:jsfiddle.net/jbutler483/50uywxpq 吗?如果没有,您能否更详细地解释一下您要做什么? 差不多了。我可以围绕它进行编码,但我更喜欢在 HTML 级别插入“完整”字符串的解决方案。如果这太痛苦了,这将起作用,但在 HTML 级别执行此操作肯定是首选。再次感谢。 @user13955:见this - 现在它只会将数据文本部分添加到末尾?【参考方案2】:

修改具有渐变的元素,从进度条到进度条。

而且。要掩盖它,请在进度条上使用白色框阴影。

样式所需的更改:

.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 中的渐变将通过进度条中的透明背景可见。

但是在进度条之外,它会被阴影遮住

【讨论】:

以上是关于具有渐变颜色的引导进度条在活动宽度上按比例显示的主要内容,如果未能解决你的问题,请参考以下文章

h5 Canvas实现圆形时间倒计时进度条

h5 Canvas实现圆形时间倒计时进度条

如何更改 SWT 进度条的颜色?

渐变颜色的进度条WGradientProgress-备用

在R闪亮中将fileinput进度条颜色更改为渐变

IOS进度渐变图层CAGradientLayer