JavaScript/jQuery LoadIndicator Options

This section describes the configuration properties of the LoadIndicator UI component.

elementAttr

Specifies the global attributes to be attached to the UI component's container element.

Type:

Object

Default Value: {}

jQuery

$(function(){
    $("#loadIndicatorContainer").dxLoadIndicator({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

Angular

HTML

TypeScript

<dx-load-indicator ...
    [elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-load-indicator>

import { DxLoadIndicatorModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxLoadIndicatorModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxLoadIndicator ...
        :element-attr="loadIndicatorAttributes">
    </DxLoadIndicator>
</template>

<script>
import DxLoadIndicator from 'devextreme-vue/load-indicator';

export default {
    components: {
        DxLoadIndicator
    },
    data() {
        return {
            loadIndicatorAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>

React

App.js

import React from 'react';

import LoadIndicator from 'devextreme-react/load-indicator';

class App extends React.Component {
    loadIndicatorAttributes = {
        id: 'elementId',
        class: 'class-name'
    }

    render() {
        return (
            <LoadIndicator ...
                elementAttr={this.loadIndicatorAttributes}>
            </LoadIndicator>
        );
    }
}
export default App;

height

Specifies the UI component's height.

Type:

Number

|

String

| undefined

Default Value: undefined

This property accepts a value of one of the following types:

Number
The height in pixels.
String
A CSS-accepted measurement of height. For example, "55px", "20vh", "80%", "inherit".

hint

Specifies text for a hint that appears when a user pauses on the UI component.

Type:

String

| undefined

Default Value: undefined

indicatorSrc

Specifies the path to an image used as the indicator.

Type:

String

Default Value: ''

onContentReady

A function that is executed when the UI component is rendered and each time the component is repainted.

Type:

Function

Function parameters:

e:

ContentReadyEvent

Information about the event.

Object structure:

Name	Type	Description
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	LoadIndicator	The UI component's instance.

Default Value: null

onDisposing

A function that is executed before the UI component is disposed of.

Type:

Function

Function parameters:

e:

DisposingEvent

Information about the event.

Object structure:

Name	Type	Description
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	LoadIndicator	The UI component's instance.

Default Value: null

onInitialized

A function used in JavaScript frameworks to save the UI component instance.

Type:

Function

Function parameters:

e:

InitializedEvent

Information about the event.

Object structure:

Name	Type	Description
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	LoadIndicator	The UI component's instance.

Default Value: null

Angular

app.component.html

app.component.ts

<dx-load-indicator ...
    (onInitialized)="saveInstance($event)">
</dx-load-indicator>

import { Component } from "@angular/core";
import LoadIndicator from "devextreme/ui/data_grid";
// ...
export class AppComponent {
    loadIndicatorInstance: LoadIndicator;
    saveInstance (e) {
        this.loadIndicatorInstance = e.component;
    }
}

Vue

App.vue (Options API)

App.vue (Composition API)

<template>
    <div>
        <DxLoadIndicator ...
            @initialized="saveInstance">
        </DxLoadIndicator>
    </div>
</template>

<script>
import DxLoadIndicator from 'devextreme-vue/load-indicator';

export default {
    components: {
        DxLoadIndicator
    },
    data: function() {
        return {
            loadIndicatorInstance: null
        };
    },
    methods: {
        saveInstance: function(e) {
            this.loadIndicatorInstance = e.component;
        }
    }
};
</script>

<template>
    <div>
        <DxLoadIndicator ...
            @initialized="saveInstance">
        </DxLoadIndicator>
    </div>
</template>

<script setup>
import DxLoadIndicator from 'devextreme-vue/load-indicator';

let loadIndicatorInstance = null;

const saveInstance = (e) => {
    loadIndicatorInstance = e.component;
}
</script>

React

App.js

import LoadIndicator from 'devextreme-react/load-indicator';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.saveInstance = this.saveInstance.bind(this);
    }

    saveInstance(e) {
        this.loadIndicatorInstance = e.component;
    }

    render() {
        return (
            <div>
                <LoadIndicator onInitialized={this.saveInstance} />
            </div>
        );
    }
}

jQuery

Get a UI component Instance in jQuery

Angular

Get a UI component Instance in Angular

Vue

Get a UI component Instance in Vue

React

Get a UI component Instance in React

onOptionChanged

A function that is executed after a UI component property is changed.

Type:

Function

Function parameters:

e:

OptionChangedEvent

Information about the event.

Object structure:

Name	Type	Description
value	any	The modified property's new value.
previousValue	any	The UI component's previous value.
name	String	The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into.
fullName	String	The path to the modified property that includes all parent properties.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	LoadIndicator	The UI component's instance.

Default Value: null

The following example shows how to subscribe to component property changes:

jQuery

index.js

$(function() {
    $("#loadIndicatorContainer").dxLoadIndicator({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});

Angular

app.component.html

app.component.ts

app.module.ts

<dx-load-indicator ...
    (onOptionChanged)="handlePropertyChange($event)"> 
</dx-load-indicator>

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
    // ...
    handlePropertyChange(e) {
        if(e.name === "changedProperty") { 
            // handle the property change here
        }
    }
}

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { DxLoadIndicatorModule } from 'devextreme-angular'; 

@NgModule({ 
    declarations: [ 
        AppComponent 
    ], 
    imports: [ 
        BrowserModule, 
        DxLoadIndicatorModule 
    ], 
    providers: [ ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { }

Vue

App.vue

<template> 
    <DxLoadIndicator ...
        @option-changed="handlePropertyChange"
    />            
</template> 

<script>  
import 'devextreme/dist/css/dx.light.css'; 
import DxLoadIndicator from 'devextreme-vue/load-indicator'; 

export default { 
    components: { 
        DxLoadIndicator
    }, 
    // ...
    methods: { 
        handlePropertyChange: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    } 
} 
</script>

React

App.js

import React from 'react';  
import 'devextreme/dist/css/dx.light.css'; 

import LoadIndicator from 'devextreme-react/load-indicator'; 

const handlePropertyChange = (e) => {
    if(e.name === "changedProperty") {
        // handle the property change here
    }
}

export default function App() { 
    return ( 
        <LoadIndicator ...
            onOptionChanged={handlePropertyChange}
        />        
    ); 
}

rtlEnabled

Switches the UI component to a right-to-left representation.

Type:

Boolean

Default Value: false

When this property is set to true, the UI component text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.

JavaScript

DevExpress.config({
    rtlEnabled: true
});

DataGrid Demo Navigation UI Demo Editors Demo

visible

Specifies whether the UI component is visible.

Type:

Boolean

Default Value: true

width

Specifies the UI component's width.

Type:

Number

|

String

| undefined

Default Value: undefined

This property accepts a value of one of the following types:

Number
The width in pixels.
String
A CSS-accepted measurement of width. For example, "55px", "20vw", "80%", "auto", "inherit".

JavaScript/jQuery LoadIndicator Options

See Also

jQuery

Angular

Vue

React

elementAttr

jQuery

Angular

Vue

React

height

hint

indicatorSrc

onContentReady

onDisposing

onInitialized

Angular

Vue

React

See Also

jQuery

Angular

Vue

React

onOptionChanged

jQuery

Angular

Vue

React

rtlEnabled

visible

width