kendo ui progress

Trying to use the kendo.ui.progress in the content of a tab, (it is loading data) but I only want to disable the content of the tab, not the whole page. what am I doing wrong?

HTML

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.metro.min.css">
<button class="k-button" id="progressStartButton" >Start Loading Progress</button>
<button class="k-button" id="progressEndButton" >End Loading Progress</button>
<div id="tabStripCompany">
                <ul>
                    <li class="k-state-active">One Tab</li>
                    <li>Other Tab</li>
                </ul>
                <!-- Settings tab -->
                <div id="settingsTab" >
                    <div id="customerSettingsLoading" ></div>
                    <div id="customerSettings">

                        <input id="licensestartdate" /><br/>
                        <input id="testuser" type="checkbox" value="true" />
                        <label for="testuser" >Test User</label><br/>
                        <input id="accountactive" type="checkbox" value="true" />
                        <label for="accountactive" >Account Active</label><br/>
                        <input id="emailoutput" type="checkbox" value="true" />
                        <label for="emailoutput" >Email Output</label><br/>
                    </div>
                </div>
                <div >
                    More stuff here...
                </div>
            </div>

CSS

#customerSettings {
    position: sticky;
}

JavaScript

$("#progressStartButton").click(function() {
    kendo.ui.progress($("#customerSettings"), true);
});

$("#progressEndButton").click(function() {
    kendo.ui.progress($("#customerSettings"), false);
});

$("#tabStripCompany").kendoTabStrip();