How to assign custom color to progress bar bootsrap 4

Question

Guys i have progressbar:

{{a.49}} %

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

 
 {{a}} %

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 :

 {{a}} %

is this method can be replicable to progress bar?

user_8620333 · Answer

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

Admin · Answer

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.


{{a}}%

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

user_11025792 · Answer

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:



    {{a}} %

How to assign custom color to progress bar bootsrap 4

3 Answers