New to Kendo UI for jQuery? Start a free 30-day trial
Colors
Updated on Sep 8, 2026
The CircularProgressBar allows you to specify an array of colors that will indicate specific ranges of the progress. For example, the CircularProgressBar will be red in the 0%-25% range; orange in the 25%-50% range; yellow in the 50%-75% range; green in the 75%-100% range.
To configure the colors, use the colors option.
The following example showcases a CircularProgressBar that changes its colors based on the current value:
<div id="circularprogressbar"></div>
<script>
$("#circularprogressbar").kendoCircularProgressBar({
value: 0,
colors: [{
to: 25,
color: '#C0392B'
}, {
from: 25,
to: 50,
color: '#D35400'
}, {
from: 50,
to: 75,
color: '#D4AC0D'
}, {
from: 75,
to: 99,
color: '#58D68D'
}, {
from: 99,
color: '#229954'
}],
centerTemplate: '<span style="color: #: color #;">#= value == 100 ? "<span class=\'k-icon k-i-check\'></span>" : value + "%" #</span>'
});
// Update the value every 50 milliseconds until it reaches 100%.
let interval = setInterval(function () {
let pb = $("#circularprogressbar").data("kendoCircularProgressBar");
let value = pb.value();
if (value >= 100) {
clearInterval(interval);
return;
}
pb.value(value + 1);
}, 50);
</script>