LoadIndicator Configuration

This section describes the configuration options of the dxLoadIndicator widget.

activeStateEnabled

A Boolean value specifying whether or not the widget changes its state when interacting with a user.

Type: Boolean
Default Value: true

This option is used when the widget is displayed on a platform whose guidelines include the active state change for widgets.

focusStateEnabled

Specifies whether or not the widget can be focused.

Type: Boolean
Default Value: false

height

Specifies the height of the widget.

Type: Number|String|function
Return Value: Number|String
The widget height.
Default Value: undefined

The option can hold a value of the following types.

  • number
    The height of the widget in pixels

  • string
    A CSS measurement of the widget height (e.g., "55px", "80%", "auto" and "inherit")

  • function
    A function returning the widget height (e.g., height:function(){ return baseHeight - 10 + "%"; })

hint

Specifies the text of the hint displayed for the widget.

Type: String
Default Value: undefined

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController" style="height: 100%;">
    <p>Place the mouse pointer over the load indicator.</p>
    <div id="myLoadIndicator" dx-load-indicator="{
        visible: true,
        bindingOptions: {
            hint: 'loadHint'
        }
    }"></div>
    <div class="dx-fieldset">
        <div class="dx-field">
            <div class="dx-field-label">hint</div>
            <div class="dx-field-value" dx-text-box="{
                bindingOptions: {
                    value: 'loadHint'
                }
            }"></div>
        </div>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.loadHint = "Data is loading...";
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body {
    text-align: center;
}
p{
    margin: 10px;
}
.dx-loadindicator{
    margin: 20px;
}
<p>Place the mouse pointer over the load indicator.</p>
<div data-bind="dxLoadIndicator: { 
    visible: true,
    hint: loadHint
}"></div>
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">hint</div>
        <div class="dx-field-value" data-bind="dxTextBox: { 
            value: loadHint 
        }"></div>
    </div>
</div>
var myViewModel = {
    loadHint: ko.observable("Data is loading...")
}
ko.applyBindings(myViewModel);
body {
    text-align: center;
}
p{
    margin: 10px;
}
.dx-loadindicator{
    margin: 20px;
}
<p>Place the mouse pointer over the load indicator.</p>
<div id="myLoadIndicator"></div>
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">hint</div>
        <div class="dx-field-value" id="hintField"></div>
    </div>
</div>
$("#myLoadIndicator").dxLoadIndicator({
    visible: true,
    hint: "Data is loading..."
});
$("#hintField").dxTextBox({
    value: "Data is loading...",
    onClick: function () {
        $("#myLoadIndicator").dxLoadIndicator("instance").option("hint", e.value);
    }
});
body {
    text-align: center;
}
p{
    margin: 10px;
}
.dx-loadindicator{
    margin: 20px;
}

indicatorSrc

Specifies the path to an image used as the indicator.

Type: String
Default Value: ""

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController" style="height: 100%;">
    <div dx-load-indicator="{
        visible: true,
        bindingOptions: {
            indicatorSrc: 'indicatorPath'
        }
    }"></div>
    <div class="dx-fieldset">
        <div class="dx-field">
            <div class="dx-field-label">Indicator</div>
            <div class="dx-field-value" dx-select-box="{
                dataSource: indicators,
                valueExpr: 'path',
                displayExpr: 'color',
                bindingOptions: {
                    value: 'indicatorPath'
                }
            }"></div>
        </div>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.indicators = [
        { color: "Blue", path: "/Content/Images/Icons/loadindicator-blue.gif" },
        { color: "Green", path: "/Content/Images/Icons/loadindicator-green.gif" },
        { color: "Red", path: "/Content/Images/Icons/loadindicator-red.gif" },
        { color: "Yellow", path: "/Content/Images/Icons/loadindicator-yellow.gif" }
    ];
    $scope.indicatorPath = null;
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body {
    text-align: center;
}
p{
    margin: 10px;
}
.dx-loadindicator{
    margin: 20px;
}
<div data-bind="dxLoadIndicator: { 
    visible: true,
    indicatorSrc: indicatorPath
}"></div>
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">Indicator</div>
        <div class="dx-field-value" data-bind="dxSelectBox: {
            dataSource: indicators,
            valueExpr: 'path',
            displayExpr: 'color',
            value: indicatorPath
        }"></div>
    </div>
</div>
var myViewModel = {
    indicators: [
        { color: "Blue", path: "/Content/Images/Icons/loadindicator-blue.gif" },
        { color: "Green", path: "/Content/Images/Icons/loadindicator-green.gif" },
        { color: "Red", path: "/Content/Images/Icons/loadindicator-red.gif" },
        { color: "Yellow", path: "/Content/Images/Icons/loadindicator-yellow.gif" }
    ],
    indicatorPath: ko.observable(null)
}
ko.applyBindings(myViewModel);
body {
    text-align: center;
}
p{
    margin: 10px;
}
.dx-loadindicator{
    margin: 20px;
}
<div id="myLoadIndicator"></div>
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">Indicator</div>
        <div class="dx-field-value" id="indicatorSelector"></div>
    </div>
</div>
$("#myLoadIndicator").dxLoadIndicator({
    visible: true
});
$("#indicatorSelector").dxSelectBox({
    displayExpr: 'color',
    valueExpr: 'path',
    dataSource: [
        { color: "Blue", path: "/Content/Images/Icons/loadindicator-blue.gif" },
        { color: "Green", path: "/Content/Images/Icons/loadindicator-green.gif" },
        { color: "Red", path: "/Content/Images/Icons/loadindicator-red.gif" },
        { color: "Yellow", path: "/Content/Images/Icons/loadindicator-yellow.gif" }
    ],
    onValueChanged: function (e) {
        $("#myLoadIndicator").dxLoadIndicator("instance").option("indicatorSrc", e.value);
    }
});
body {
    text-align: center;
}
p{
    margin: 10px;
}
.dx-loadindicator{
    margin: 20px;
}

onDisposing

A handler for the disposing event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
Default Value: null

Assign a function to perform a custom action when you dispose of this component.

onOptionChanged

A handler for the optionChanged event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
value: any
Specifies a new value for the option.
Default Value: null

Assign a function to perform a custom action after an option of the component is changed.

rtlEnabled

Specifies whether or not the current component supports a right-to-left representation.

Type: Boolean
Default Value: false

If you need to switch the display of this DevExtreme component to right-to-left, enable a specifically designed configuration option - rtlEnabled. When this option is set to true, the text flows from right to left, and the layout the component's elements is reversed. To switch the entire application/site to a right-to-left representation, use the static DevExpress.rtlEnabled field.

tabIndex

Specifies the widget tab index.

Type: Number
Default Value: 0

visible

A Boolean value specifying whether or not the widget is visible.

Type: Boolean
Default Value: true

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController" style="height: 100%;">
    <div class="button" dx-button="{ text: 'Load', onClick: showIndicator }"></div><br />
    <div id="myLoadIndicator" dx-load-indicator="{ bindingOptions: { visible: 'indicatorVisible' }}"></div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.indicatorVisible = false,
    $scope.showIndicator = function () {
        $scope.indicatorVisible = true;
        setTimeout(hideIndicator, 3000);
    };
    hideIndicator = function () {
        $("#myLoadIndicator").dxLoadIndicator("instance").option("visible", false);
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body {
    text-align: center;
}
.button{
    margin-top: 25px;
}
.dx-loadindicator{
    margin: 20px;
}
<div class="button" data-bind="dxButton:{text: 'Load', onClick: showIndicator}"></div><br />
<div data-bind="dxLoadIndicator: { visible: indicatorVisible }"></div>
var myViewModel = {
    indicatorVisible: ko.observable(false),
    showIndicator: function () {
        this.indicatorVisible(true);
        setTimeout($.proxy(this.hideIndicator, this), 3000);
    },
    hideIndicator: function () {
        this.indicatorVisible(false);
    }
}
ko.applyBindings(myViewModel);
body {
    text-align: center;
}
.button{
    margin-top: 25px;
}
.dx-loadindicator{
    margin: 20px;
}
<div class="button" id="loadButton"></div><br />
<div id="myLoadIndicator"></div>
$("#myLoadIndicator").dxLoadIndicator({
    visible: false
});
$("#loadButton").dxButton({
    text: 'Load',
    onClick: function () {
        $("#myLoadIndicator").dxLoadIndicator("instance").option("visible", true);
        setTimeout($.proxy(hideIndicator, this), 3000);
    }
});
var hideIndicator = function () {
    $("#myLoadIndicator").dxLoadIndicator("instance").option("visible", false);
}
body {
    text-align: center;
}
.button{
    margin-top: 25px;
}
.dx-loadindicator{
    margin: 20px;
}

width

Specifies the width of the widget.

Type: Number|String|function
Return Value: Number|String
The widget width.
Default Value: undefined

The option can hold a value of the following types.

  • numeric
    The widget width in pixels.
  • string
    A CSS measurement of the widget width (e.g., "55px", "80%", "auto" and "inherit").
  • function
    The function returning the widget width. For example, see the following code.

    JavaScript
    width: function () { 
        return baseWidth - 10 + "%";
    }