New to Kendo UI for jQuery? Download free 30-day trial

    Integration

    The Loader component can be integrated in another component or it can be used as a building block of a bigger functionality.

    Loader in a Button

    The following example demonstrates how the Loader can be integrated in a button.

    Open In Dojo
        <button id="toggle" class="k-button">
            <div id="loader"></div>
            Show Loader
        </button> 
    
        <script>
            var loader = $('#loader').kendoLoader({
                visible: false,
                size: "small"
            }).data('kendoLoader');
    
            $("#toggle").click(function () {
                loader.show();
                setTimeout(function () {
                    loader.hide();
                }, 3000)
            })
        </script>
    
        <style>
            .k-button > .k-loader {
                margin-right: 8px;
            }
        </style>

    Loader in a Loading Panel

    The following example demonstrates how the Loader can be used as a building block in a Loading Panel.

    Open In Dojo
    
        <button class='k-button'>Show Loading Panel</button>
        <div class="loader">
            <div class="example-inner">
            <div class="k-loading-panel">
                <div class="k-loading-panel-mask"></div>
                <div class="k-loading-panel-wrapper">
                    <span id="loader">
                    </span>
                    <div class="k-loading-panel-text">Loading...</div>
                </div>
            </div>
            <div class="example-text">Example Container</div>
            </div>
        </div>
        <script>
            var loadingPanelVisible = false;
            $("#loader").kendoLoader({
                visible:false
            });
            $(".k-loading-panel").hide();
            $("button").click(function(){
              var loader = $("#loader").data("kendoLoader");
              loadingPanelVisible = !loadingPanelVisible;
              if (loadingPanelVisible) {
                $("button").text('Hide Loading Panel');
                loader.show();
                $(".k-loading-panel").show();
              } else {
                $("button").text('Show Loading Panel');
                loader.hide();
                $(".k-loading-panel").hide();
              }
            })
        </script>
        <style>
        .loader {
            display: flex;
            justify-content: center;
            align-items: center;
            height:450px;
        }
    
        .example-inner {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid #000000;
        }
        .example-text {
            font-size: 1.5rem;
        }
        .k-button {
            margin-bottom: 20px;
        }
        /* Loader Panel Styles */
        .k-loading-panel {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;
        }
        .k-loading-panel-mask {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: #000000;
            opacity: 0.8;
        }
        .k-loading-panel-wrapper {
            position: relative;
            z-index: 2;
        }
        .k-loading-panel-text {
            margin-top: 20px;
            text-align: center;
            color: #ffffff;
        }
        </style>