Show and Hide Using the API

NOTE
In this article, the Button widget is used to demonstrate how to show and hide the LoadIndicator. This choice is made for purely demonstrational purposes, and you can do the same operations using another widget following the same guidelines.

To specify whether the LoadIndicator is shown, change the visible option.

jQuery

HTML
<div id="loadIndicatorContainer"></div>
<div id="buttonContainer"></div>
JavaScript
$(function() {
    var loadIndicator =  $("#loadIndicatorContainer").dxLoadIndicator({
        visible: false      
    }).dxLoadIndicator("instance");

    $("#buttonContainer").dxButton({
        text: "Toggle the LoadIndicator", 
        onClick: function () {
            var isLoadIndicatorVisible = loadIndicator.option("visible");
            loadIndicator.option("visible", !isLoadIndicatorVisible);
        } 
    });
});

ASP.NET MVC Wrappers

Razor C#
Razor VB
@(Html.DevExtreme().LoadIndicator()
    .ID("loadIndicator")
    .Visible(false)
)

@(Html.DevExtreme().Button()
    .ID("button")
    .Text("Toggle the LoadIndicator")
    .OnClick(@<text>
        function () {
            var loadIndicator = $("#loadIndicator").dxLoadIndicator("instance");
            var isLoadIndicatorVisible = loadIndicator.option("visible");
            loadIndicator.option("visible", !isLoadIndicatorVisible);
        } 
    </text>)
)
@(Html.DevExtreme().LoadIndicator() _
    .ID("loadIndicator") _
    .Visible(False)
)

@(Html.DevExtreme().Button() _
    .ID("button") _
    .Text("Toggle the LoadIndicator") _
    .OnClick("button_click")
)

<script>
    function button_click() {
        var loadIndicator = $("#loadIndicator").dxLoadIndicator("instance");
        var isLoadIndicatorVisible = loadIndicator.option("visible");
        loadIndicator.option("visible", !isLoadIndicatorVisible);
    }
</script>

With AngularJS or Knockout, bind the visible property of the LoadIndicator widget to a scope property (in AngularJS) or an observable variable (in Knockout). After that, change this scope property or observable variable, and the LoadIndicator will appear or disappear.

AngularJS

HTML
<div ng-controller="DemoController">
    <div dx-load-indicator="{
        bindingOptions: {
            visible: 'isLoadIndicatorVisible'
        }
    }"></div>
    <div dx-button="{
        text: 'Toggle the LoadIndicator',
        onClick: clickHandler
    }"></div>
</div>
JavaScript
angular.module('DemoApp', ['dx'])
    .controller('DemoController', function DemoController($scope) {
        $scope.isLoadIndicatorVisible = false;
        $scope.clickHandler = function () {
            var currentValue = $scope.isLoadIndicatorVisible;
            $scope.isLoadIndicatorVisible = !currentValue;
        }
    });

Knockout

HTML
<div data-bind="dxLoadIndicator: {
    visible: isLoadIndicatorVisible
}"></div>
<div data-bind="dxButton: {
    text: 'Toggle the LoadIndicator',
    onClick: function (e) {
        var currentValue = e.model.isLoadIndicatorVisible();
        e.model.isLoadIndicatorVisible(!currentValue);
    }
}"></div>
JavaScript
var viewModel = {
    isLoadIndicatorVisible: ko.observable(false)
};

ko.applyBindings(viewModel);
See Also