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


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 the infinite mode, set the indeterminate configuration to true:
        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 the value method. The following example showcases how to update the value every 50 milliseconds:
<div id="circularprogressbar"></div>

        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) {
        pb.value(value + 1);
    }, 50);

See Also

In this article