为了带来更好的用户体验，需要实现当请求一个长操作时，加载遮罩层，缓解等待焦虑感

于是先到这样的代码：

复制代码
<!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