如何为进度条引导程序 4 分配自定义颜色

Question

伙计们，我有进度条：

<div class="progress"><div class="progress-bar" style="width:{{a.49}}%">{{a.49}} %</div> </div>

如何根据 CSS 中的条件为进度条分配自定义颜色？ ：

if a.49 < 50 color red
if a.49 > 50 but less than 70 color orange
if a.49 > 70 color green

非常感谢您的帮助。

我根据答案尝试但无法得到确定的结果：

a=50

 <div class="progress">
 <div class="progress-bar" style="width:{{a}} %; background:{% if a < 50 %}red{% elif a > 70 %} green{% else %}orange{% endif %};">{{a}} % </div></div>

但是，尽管在这种情况下，它会根据值将条形内部颜色着色为橙色，但是条形填充了 10-20%，而之前填充了 50%，作为 {{a}} 的值

像这样：

<div class="progress"><div class="progress-bar" style="width:{{a}}% ;
       backkground:{% if a < 50 %} red {% elif a > 70 %} green {% else %} orange {% endif %}"> {{a}} %</div> </div>

这个方法可以复制到进度条吗？

Answer 1

使用 CSS 变量和多个背景你可以做到：

.progress .progress-bar {
  background: 
    linear-gradient(green, green)   0/ calc(var(--w)*1% - 70%) 1px, 
    linear-gradient(orange, orange) 0/ calc(var(--w)*1% - 50%) 1px, 
    red;
  width: calc(var(--w)*1%);
}

.progress .progress-bar::before {
  content: attr(style) "%";
  font-family:monospace;
  text-indent:-4ch;
  margin:auto;
  overflow:hidden;
}

html {
  font-size:25px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div class="progress">
  <div class="progress-bar" style="--w:20"></div>
</div>

<div class="progress">
  <div class="progress-bar" style="--w:80"></div>
</div>

<div class="progress">
  <div class="progress-bar" style="--w:60"></div>
</div>

Answer 2

您可以使用简单的 JavaScript 做到这一点。唯一的警告是不要在“样式”属性上添加任何额外的空格，否则这将不起作用。

首先，稍微更改您的进度条码。您必须添加新的 id="anyname"。 我将使用“进度”作为我的 ID。

<div class="progress">
<div id="progress" class="progress-bar" style="width:{{a}}%">{{a}}%</div> 
</div>

接下来，添加以下 javascript。它会自动获取您的百分比并相应地更改颜色。我有一个函数可以做到这一点。

功能：

    function formatbar(id) {
    div1 = document.getElementById(id);
    style = div1.getAttribute('style');
    percent = style.substring(6);
    a= percent.substring(0, percent.length - 1);

    if (a<50) {
    //color red
    document.getElementById(id).style.backgroundColor = "red";
    } else if (a<70) {
    //color orange
    document.getElementById(id).style.backgroundColor = "orange";
    } else if (a>70) {
    //color green
    document.getElementById(id).style.backgroundColor = "green";
    }
    }

现在我们要做的就是使用我们提供的 ID 调用函数。

formatbar(id);

使用它，您可以制作许多这样的进度条。唯一的条件是每个进度条都必须有自己的 ID，否则这将不起作用。

formatbar("progress")
formatbar("progress1")
formatbar("progress12")
function formatbar(id) {
div1 = document.getElementById(id);
style = div1.getAttribute('style');
percent = style.substring(6);
a= percent.substring(0, percent.length - 1);

if (a<50) {
//color red
document.getElementById(id).style.backgroundColor = "red";
} else if (a<70) {
//color orange
document.getElementById(id).style.backgroundColor = "orange";
} else if (a>70) {
//color green
document.getElementById(id).style.backgroundColor = "green";
}
}

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div  class="progress"><div id="progress" class="progress-bar" style="width:20%">20%</div> </div>
<div  class="progress"><div id="progress1" class="progress-bar" style="width:60%">60%</div> </div>
<div  class="progress"><div id="progress12" class="progress-bar" style="width:90%">90%</div> </div>

Answer 3

您可以使用 Django 模板语言来执行此操作，而无需编写更多 CSS：

模板逻辑： {% if a<50 %}red{% elif a<70 %}green{% else %}blue{% endif %}

插入：

<div class="progress">
<div class="progress-bar" style="width:{{a}}%; color:{% if a<50 %}red{% elif a<70 %}green{% else %}blue{% endif %};">
    {{a}} %
</div> 
</div>