如何在单击搜索按钮时添加进度条

Question

当我搜索结果时，我的数据需要一些时间来显示，所以我想要一个进度条应该在点击搜索button.It 5-8秒后显示data.If我在div class=之后添加下面的div“k-data.If-content div in inspect element then load bar工作得很好但数据加载后不会隐藏load.How可以在数据加载之前添加下面的代码并在加载后删除。谢谢!！

<div class="k-loading-mask" style="width: 100%; height: 100%; top: 0px; left: 0px;">
<span class="k-loading-text">Loading...</span>
<div class="k-loading-image"></div>
<div class="k-loading-color"></div>
</div>

Answer 1

Kendo ui已经提供了一种显示进度条的方法。你可以这样使用它：-

kendo.ui.progress(element, true);

其中element是您想要附加进度标记的div (您可以在某个Master\Layout页面中添加此div )。

此外，您还可以在一些常见的JS文件中编写泛型方法，如下所示：

function displayProgressBar(display){
    kendo.ui.progress(element, display);
}

最后，您可以从任何JS函数调用它，比如：displayProgressBar(true)显示进度，或者displayProgressBar(false)隐藏进度。

Answer 2

在视图中添加gif，设置"display: none;“，然后添加onclick( CODEdocument.getElementById("loadingGif").style.display = 'block';)/CODE