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: {}

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>

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.

Default Value: null

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

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>

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.