UI Widgets LoadIndicator

The widget used to indicate the loading process.

Included in: dx.phonejs.js, dx.webappjs.js, dx.all.js

The dxLoadIndicator widget represents a loading process indicator displayed over the current view.

This widget, like any other DevExtreme UI widget, can be created using one of three possible approaches: jQuery, Knockout or AngularJS. The following code demonstrates how to create the dxLoadIndicator widget using the Knockout approach.

HTML
<div data-bind="dxLoadIndicator:{ visible: indicatorVisible }"></div>

Declare an observable Boolean variable and assign it to the visible configuration option to control widget visibility.

JavaScript
var indicatorVisible = ko.observable(false);
See Also
  • To learn how to create widgets in detail, refer to the Create a Widget article.
Show Example:
jQuery
<div class="button" data-bind="dxButton:{text: 'Load', clickAction: showIndicator}"></div><br />
<div id="indicator" data-bind="dxLoadIndicator: { visible: indicatorVisible }">
</div>
indicatorVisible = ko.observable(false);
showIndicator = function () {
    indicatorVisible(true);
    setTimeout($.proxy(this.hideIndicator, this), 3000);
};
hideIndicator = function () {
    indicatorVisible(false);
};
body {
    text-align: center;
}
.button{
    margin-top: 25px;
}
.indicator{
    position: absolute;
    margin: 50px;
}

Configuration

This section describes the configuration options of the dxLoadIndicator widget.

Methods

This section describes methods that can be used to manipulate a widget.

Events

This section describes events fired by this component.