JQuery ProgressBar更改默认颜色

Question

我使用JQuery Progress-Bar并希望更改其白色\灰色模式。

Currenly-空白空间用白色填充，填充空间用灰色着色。

我需要的颜色架构：黑色用于空格和红色用于填充空格。

这就是我的html的样子：

<div id="progress" style="margin-top:50px;">
    <div id="progressbar"><div class="progress-label">Loading...</div></div>
</div>

这就是我控制进度回归行为的方式：

var progressbar = $("#progressbar"), progressLabel = $(".progress-label");
progressbar.progressbar({
    value: false,
    change: function () {
        progressLabel.text(progressbar.progressbar("value") + "%");
    },
    complete: function () {
        progressLabel.text("Complete!");
    }
});

我怎样才能改变这种颜色？

Answer 1

您想要设置两个类：

• ui-progressbar 表示空格
填充空格的
• ui-progressbar-value

背景参数确定两种情况下的颜色。

满足您需求的CSS架构将是这样的：

  .ui-progressbar {
    background: black;
    //... other values ...
  }

  .ui-progressbar-value {
    background: red;
    //... other values ...
  }

以下是工作示例：plnkr

Answer 2

点击此处查看有关主题的信息：http://api.jqueryui.com/progressbar/

您应该能够通过编辑主jquery-ui CSS来定义颜色，特别是ui-progressbar类（主容器）和百分比/进度的ui-progressbar-value类。