Kendo UI Window with a loading indicator

by Liu David

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.web.min.js"></script>
<div id="win">initial window div content</div>

CSS

html{font:12px sans-serif}

.k-window .k-loading-mask
{
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:2;
}

JavaScript

var winElement = $("#win").kendoWindow({
    content: "http://www.kendoui.com/",
    width: 600,
    height: 400,
    actions: ["Refresh", "Close"],
    refresh: function(){winElement.find(".k-loading-mask").remove();}
});

function loadingElement() {
    return $("<div class='k-loading-mask'><span class='k-loading-text'>Loading...</span><div class='k-loading-image'/><div class='k-loading-color'/></div>");
}

winElement.closest(".k-window").find(".k-i-refresh").click(function(){
    winElement.append(loadingElement());
});