New to Kendo UI for jQuery? Start a free 30-day trial
Colors
Updated over 6 months ago
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>