Getting Started with the ProgressBar
This guide demonstrates how to get up and running with the Kendo UI for jQuery ProgressBar.
After the completion of this guide, you will be able to achieve the following end result:
<div id="progressbar"></div>
<script>
$("#progressbar").kendoProgressBar({
min: 100,
max: 500,
value: 150,
type: "percent",
change: onChange,
complete: onComplete
});
function onChange(e) {
console.log("Change event :: value is " + e.value);
}
function onComplete(e) {
console.log("Complete event :: value is " + e.value);
}
function progress() {
var pb = $("#progressbar").data("kendoProgressBar");
pb.value(100);
var interval = setInterval(function () {
if (pb.value() < 500) {
pb.value(pb.value() + 50);
} else {
clearInterval(interval);
}
}, 100);
}
setTimeout(function(){
progress()
},1000)
</script>
1. Create a Div Element
First, create an empty <div> element on the page and use it as an initialization element for the ProgressBar.
<div id="progressbar"></div>
2. Initialize the ProgressBar
In this step, you will initialize the ProgressBar from the <div> element. When you initialize the component, all settings of the ProgressBar will be provided in the script statement. You have to describe its configuration and event handlers in JavaScript.
<div id="progressbar"></div>
<script>
// Target the div element by using jQuery and then call the kendoProgressBar() method.
$("#progressbar").kendoProgressBar();
</script>
3. Configure the Min and Max Values
After the initialization, you can configure additional options for the ProgressBar, such as the min and the max values.
<div id="progressbar"></div>
<script>
$("#progressbar").kendoProgressBar({
min: 100,
max: 500
});
</script>
4. Set the ProgressBar Value
You can utilize the value option if you wish to set the ProgressBar indicator to a given value.
<div id="progressbar"></div>
<script>
$("#progressbar").kendoProgressBar({
min: 100,
max: 500,
value: 150
});
</script>
5. Set the Type
You can specify different ProgressBar [types] which affect how the value is visualized.
<div id="progressbar"></div>
<script>
$("#progressbar").kendoProgressBar({
min: 100,
max: 500,
value: 150,
type: "percent",
});
</script>
6. Bind to the ProgressBar Events
The ProgressBar supports the change and complete events. The change event fires each time a new value is set. The complete fires when the progress of the task is completed, that is, each time the ProgressBar reaches its maximum value.
<div id="progressbar"></div>
<script>
$("#progressbar").kendoProgressBar({
min: 100,
max: 500,
value: 150,
type: "percent",
change: onChange,
complete: onComplete
});
function onChange(e) {
console.log("Change event :: value is " + e.value);
}
function onComplete(e) {
console.log("Complete event :: value is " + e.value);
}
function progress() {
var pb = $("#progressbar").data("kendoProgressBar");
pb.value(100);
var interval = setInterval(function () {
if (pb.value() < 500) {
pb.value(pb.value() + 50);
} else {
clearInterval(interval);
}
}, 100);
}
setTimeout(function(){
progress()
},1000)
</script>