material-design - MDL : Changing Color of Indeterminate Progress Bar?

Question

如何在 Material Design Lite 中更改不确定进度条的颜色？

我希望栏在调用时使用我选择的强调色(粉红色)

    <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">

这是当前进度条的行:

<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate" style="width: 100%"></div>

我已经尝试将 mdl-color--pink-500 和 mdl-color-text--pink-500 添加到类中，但无济于事。

Answer 1

遇到了同样的问题。显然 mdl-progress 使用主题颜色进行显示并且没有直接的方法来改变它。我最终创建了一个额外的类 mdl-progress-red，我附加到 mdl-progress 只是为了我可以设置子元素的颜色。下面是红色 rgb(255,0,0) 的 CSS。如果您想更改颜色，只需将 rgb(255,0,0) 替换为您想要的颜色即可。

.mdl-progress-red > .progressbar {
    background-color: rgb(255,0,0);
}

.mdl-progress-red > .bufferbar {
    background-image: linear-gradient(to right, rgba(255,255,255, 0.7), rgba(255,255,255, 0.7)), linear-gradient(to right, rgb(255,0,0), rgb(255,0,0));
}

.mdl-progress-red > .auxbar {
    background-image: linear-gradient(to right, rgba(255,255,255, 0.9), rgba(255,255,255, 0.9)), linear-gradient(to right, rgb(255,0,0), rgb(255,0,0));
}

然后，要将颜色应用于进度条 - 您只需像这样指定新的类名:

<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate mdl-progress-red" style="width: 100%"></div>