javascript - JQuery ProgressBar 更改默认颜色

Question

我正在使用 JQuery Progress-Bar 并想更改他的白色\灰色颜色模式。

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

我需要的颜色模式:黑色代表空白，红色代表填充空间。

这是我的 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 填充空间

background 参数决定两种情况下的颜色。

满足您需求的 CSS 架构应该是这样的:

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

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

这是工作示例:plnkr