Change the Background Color of the ProgressBar Based on the Value

Environment

Product Version 2019.3.917
Product ProgressBar for Progress® Kendo UI®

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:

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

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

Example

<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

In this article
Not finding the help you need? Improve this article