New to Kendo UI for jQuery? Download free 30-day trial

Change the Background Color of the ProgressBar Based on the Value

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:

$("#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