Vue LoadIndicator Props

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.

Selector: DxElementAttr
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

|

Function

Return Value:

Number

|

String

The UI component's height.

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".

  • Function (deprecated since v21.2)
    Refer to the W0017 warning description for information on how you can migrate to viewport units.

hint

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

Type:

String

Default Value: undefined

indicatorSrc

Specifies the path to an image used as the indicator.

Selector: indicator-src
Type:

String

Default Value: ''

onContentReady

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

Selector: @content-ready
Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

LoadIndicator

The UI component's instance.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

model any

Model data. Available only when using Knockout.

Default Value: null

onDisposing

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

Selector: @disposing
Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

LoadIndicator

The UI component's instance.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

model any

Model data. Available only if you use Knockout.

Default Value: null

onInitialized

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

Selector: @initialized
Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

LoadIndicator

The UI component's instance.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

Default Value: null

onOptionChanged

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

Selector: @option-changed
Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
model any

Model data. Available only if you use Knockout.

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.

name

String

The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into.

value any

The modified property's new value.

previousValue any

The UI component's previous value.

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.

Selector: rtl-enabled
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

|

Function

Return Value:

Number

|

String

The UI component's width.

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".

  • Function (deprecated since v21.2)
    Refer to the W0017 warning description for information on how you can migrate to viewport units.