Change the Background Color of the ProgressBar Based on the Value

Updated on Sep 8, 2026

Environment

Product Version	2019.3.917
Product	Progress® Kendo UI® ProgressBar for jQuery

Description

How can I show different colors in the Kendo UI ProgressBar based on the value?

Solution

Use the change event which fires every time the value changes. After comparing the value, use the progressWrapper to set the background and the border color. For example:

javascript

$("#progressbar").kendoProgressBar({
    change: change
  });

  function change(e) {
    switch(true){
    case (e.value<=25):
      this.progressWrapper.css({"background-color": "#e32424", "border-color": "#e32424"});
    }
  }

Example

The following example initializes a ProgressBar and programmatically increments its value from 1 to 100, triggering the color change handler at each step.

Example

View Source

<div id="progressbar"></div>
<script>
  $("#progressbar").kendoProgressBar({
    change: change
  });

  function change(e) {
    switch(true){
      case (e.value<=25):
        this.progressWrapper.css({"background-color": "#e32424", "border-color": "#e32424"});
        break;

      case (e.value>25 && e.value<=50):
        this.progressWrapper.css({"background-color": "#e68e1c", "border-color": "#e68e1c"});
        break;

      case (e.value>51 && e.value<=75):
        this.progressWrapper.css({"background-color": "#e6dc1c", "border-color": "#e6dc1c"});
        break;

      case (e.value>76 && e.value<=100):
        this.progressWrapper.css({"background-color": "#32c728", "border-color": "#32c728"});
        break;
    }
  }


  $(document).ready(function() {
   var x = 1;
   while(x<=100){
    x+=1;
    $("#progressbar").data("kendoProgressBar").value(x);
   }
  });  
</script>

See Also

• change
• progressWrapper