Kendo UI for jQuery CirularProgressbar Overview
The CircularProgressBar delivers functionality for displaying and tracking the progress of a task.
The CircularProgressBar is part of Kendo UI for jQuery, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Basic Configuration
-
Add a
<div>
element to the page:<div id="circularprogressbar"></div>
-
Initialize the CircularProgressBar widget:
<div id="circularprogressbar"></div> <script> $("#circularprogressbar").kendoCircularProgressBar(); </script>
-
Configure additional options such as
value
,colors
, andcenterTemplate
.<div id="circularprogressbar"></div> <script> $("#circularprogressbar").kendoCircularProgressBar({ value: 50, // Sets the default value of the progressbar. // Configures an array of colors that will be used at certain stages of the progress. 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' }], // Configures the appearance of the text in the middle of the progressbar. centerTemplate: '<span style="color: #: color #;">#= value == 100 ? "<span class=\'k-icon k-i-check\'></span>" : value + "%" #</span>' }); </script>
The following example demonstrates the full implementation of the approach.
<div id="circularprogressbar"></div>
<script>
$("#circularprogressbar").kendoCircularProgressBar({
value: 50, // Change the value to see the difference between the colors.
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>'
});
</script>
Modes
The CircularProgressBar comes in the infinite
and finite
modes:
-
The
infinite
mode renders a CircularProgressBar that is always spinning and with no clear indication of when the task will be completed. To enable theinfinite
mode, set theindeterminate
configuration totrue
:$("#circularprogressbar").kendoCircularProgressBar({ indeterminate: true });
-
The
finite
mode is the default mode of the CircularProgressBar and shows a clear indication of when a task will be completed. To update the value of the CircularProgressBar, use thevalue
method. The following example showcases how to update the value every 50 milliseconds:<div id="circularprogressbar"></div> <script> $("#circularprogressbar").kendoCircularProgressBar({ value: 0, centerTemplate: '<span style="color: #: color #;">#= 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>
Colors
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>
Template
The CircularProgressBar enables you to render a custom message or element inside the center of the widget. To achieve this functionality, use the centerTemplate
option.
The following example showcases how to render custom text that is the same color as the CircularProgressBar:
<div id="circularprogressbar"></div>
<script>
$("#circularprogressbar").kendoCircularProgressBar({
value: 0,
color: "red",
centerTemplate: '<span style="color: #: color #;">#= value # percent</span>'
});
</script>
Referencing Existing Instances
Make a reference to an existing CirularProgressbar instance through jQuery.data()
and use the CircularProgressBar API to control its behavior.
The following example demonstrates how to access an existing CircularProgressBar instance.
var circularprogressbar = $("#circularprogressbar").data("kendoCircularProgressBar");