'How to assign custom color to progress bar bootsrap 4

Guys i have progressbar:

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

How can i assign custom color to progress bar based on condititon in CSS ? :

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

Would appreciate your help.

What i tried based on answers but cannot get the desured result :

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>

However though it colors inside bar in color based on value in this case orange, however the bar is filled by 10-20% whereas before it used to fill by 50% as the value of {{a}}

like this :

<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>

is this method can be replicable to progress bar?

htmlcssdjangobootstrap-4


Solution 1:[1]

With CSS variables and multiple background you can do it:

.progress .progress-bar {
  background: 
    linear-gradient(green  0 0) 0/ calc(var(--w)*1% - 70%) 1px, 
    linear-gradient(orange 0 0) 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>

Solution 2:[2]

You can do this with simple JavaScript. Only warning is don't add any extra spaces on your "style" attribute or this won't work.

First, Change your progress bar code a little. You have to add new id="anyname". I am going to use "progress" as my ID.

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

Next, add the following javascript. It will get your percentage automatically and change color accordingly. I have a function that will do this.

Function:

    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";
    }
    }

Now all we have to do, is call the function with the ID we provided. 

formatbar(id);

Using this, you can make many progressbars like this. The only condition is each progress bar has to have it's own ID or this won't work.

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>

Solution 3:[3]

You could use the Django template language to do this without writing more CSS:

Template logic: {% if a<50 %}red{% elif a<70 %}green{% else %}blue{% endif %}

Plugged in:

<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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3

Related Questions