Kendo UI for jQuery ProgressBar Overview
The ProgressBar delivers rich functionality for displaying and tracking the progress of a task.
To see the ProgressBar in action, visit its demo page.
The component provides the following types:
The ProgressBar 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.
-
value—Represents a regular ProgressBar which displays the progress status as an absolute value. -
percent—Represents a regular ProgressBar which displays the progress status in percentage. -
chunk—Represents a ProgressBar which is divided in chunks and displays the progress status in steps.
The ProgressBar also supports horizontal and vertical orientation, reversed direction, minimum and maximum values, and animation duration.
Basic Configuration
The following example demonstrates how to create the ProgressBar by using a <div> element.
<div id="progressbar"></div>
The following example demonstrates how to initialize the ProgressBar by using a jQuery selector.
$(document).ready(function(){
$("#progressbar").kendoProgressBar();
});
The following example demonstrates how to initialize a chunk ProgressBar.
<div id="progressbar"></div>
<script>
$("#progressbar").kendoProgressBar({
type: "chunk",
chunkCount: 10
});
</script>
The following example demonstrates how to configure the basic properties of the ProgressBar.
$("#progressbar").kendoProgressBar({
min: 100,
max: 500,
value: 100,
type: "percent",
orientation: "vertical",
reverse: true,
complete: function(e) {
console.log("Progress completed");
},
animation: {
duration: 600
}
});
Functionality and Features
You can set the appearance of the ProgressBar.
Events
The ProgressBar supports the change and complete events. change fires each time a new value is set. complete fires when the progress of the task is completed, that is, each time the ProgressBar reaches its maximum value.
To handle these events, you can specify the JavaScript function which will handle the event during the initialization of the component or use the bind method of the component after its initialization.
For a runnable example, refer to the demo on using the events of the ProgressBar.
Referencing Existing Instances
Make a reference to an existing ProgressBar instance through jQuery.data() and use the ProgressBar API to control its behavior.
The following example demonstrates how to access an existing ProgressBar instance.
var progressbar = $("#progressbar").data("kendoProgressBar");