为了带来更好的用户体验，需要实现当请求一个长操作时，加载遮罩层，缓解等待焦虑感
于是先到这样的代码：
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/diagram/index">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.uniform.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.uniform.min.css" />
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.mobile.all.min.css">
<script src="http://kendo.cdn.telerik.com/2017.2.504/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.2.504/js/jszip.min.js"></script>
</head>
<body>
<div id="example">
<button onclick="StartProcess()">Start Process</button>
</div>
<style>
#example {
width: 300px;
height: 300px;
background: #f00;
}
</style>
<script>
function StartProcess() {
kendo.ui.progress($(document.body), true);
LongProcess(5000);
kendo.ui.progress($(document.body), false);
}
function LongProcess(milliseconds) {
var startTime = new Date().getTime();
var endTime = startTime + milliseconds;
while (endTime > new Date().getTime()) {};
}
</script>
</body>
</html>
发现根本不起作用，
检查后，我注意到这是一个时间问题。
加载指示器没有足够的时间来初始化。因为漫长的过程开始得太快并且浏览器没有响应。我可以假设这与实际应用程序中发生的情况相似。
请确保在显示加载指示器后稍微执行保存进度，以便有足够的时间正确渲染：
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/diagram/index">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.uniform.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.uniform.min.css" />
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.mobile.all.min.css">
<script src="http://kendo.cdn.telerik.com/2017.2.504/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.2.504/js/jszip.min.js"></script>
</head>
<body>
<div id="example">
<button onclick="StartProcess()">Start Process</button>
</div>
<style>
#example {
width: 300px;
height: 300px;
background: #f00;
}
</style>
<script>
function StartProcess() {
kendo.ui.progress($(document.body), true);
setTimeout(function(){
LongProcess(5000);
kendo.ui.progress($(document.body), false);
},100)//做个很小的时间差
}
function LongProcess(milliseconds) {//长操作，可能是查询数据库，也可能是页面元素变动，我使用的是grid.autoFitColumns(); 列比较多
var startTime = new Date().getTime();
var endTime = startTime + milliseconds;
while (endTime > new Date().getTime()) {};
}
</script>
</body>
</html>
来自：https://www.telerik.com/forums/kendo-ui-progress
