<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://kendo.cdn.telerik.com/themes/10.2.0/default/default-main.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="configurator">
<div class="header">Configurator</div>
<div class="box-col">
<h4>Configuration</h4>
<ul>
<li>
<input type="text" data-bind="value: progressValue" />
<label>Set value</label>
</li>
<li>
<label><input type="checkbox" data-bind="checked: isEnabled">Enable</label>
</li>
<li>
<label><input type="checkbox" data-bind="checked: isVisible">Visible</label>
</li>
</ul>
</div>
<div class="box-col">
<h4>Information</h4>
Kendo UI ProgressBar supports the
<a href="https://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/enabled">enabled</a>,
<a href="https://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/events">events</a>,
<a href="https://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/value">value</a> and
<a href="https://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/visible">visible</a> bindings.
</div>
</div>
<div class="demo-section">
<div>
<h4>ProgressBar</h4>
<div data-role="progressbar"
data-min="0"
data-max="200"
data-bind="enabled: isEnabled,
visible: isVisible,
value: progressValue,
events: { start: onStart,
change: onChange,
complete: onComplete}"
style="width: 100%;"></div>
</div>
</div>
<script>
var viewModel = kendo.observable({
progressValue: 0,
isEnabled: true,
isVisible: true,
onStart: function () {
kendoConsole.log("event :: start (" + this.get("progressValue") + ")");
},
onChange: function () {
kendoConsole.log("event :: change (" + this.get("progressValue") + ")");
},
onComplete: function () {
kendoConsole.log("event :: complete (" + this.get("progressValue") + ")");
}
});
kendo.bind($("#example"), viewModel);
</script>
</div>
<div class="kd-example-console">
<div class="header">
<span class="title">CONSOLE LOG</span>
<span class="clear kd-text-secondary">Clear log</span>
</div>
<div class="console"></div>
</div>
</body>
</html>