KendoUI ProgressBar

tooltips

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2014.1.416/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
<div id="progressbar"></div>

JavaScript

$("#progressbar").kendoProgressBar({
    max: 100,
    value: 45,
    type: "percent",
    min: 0,
    orientation: "vertical",
    showStatus: true,
    animation: false,
    change: onChange,
    complete: onComplete
});

function onChange(e) {
    this.progressWrapper.css({
        "background-color": "#EE9F05",
        "border-color": "#EE9F05"
      });
}
function onComplete(e) {
    var total = $("#totalProgressBar").data("kendoProgressBar");
    total.value(total.value() + 1);
}
$("#progressbar").data("kendoProgressBar").value(10);