All docs
V19.2
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - Overview

The LoadIndicator is a UI element notifying the viewer that a process is in progress.

View Demo

The following code adds a simple LoadIndicator to your page. You can change the widget size, using the height and width options.

jQuery
HTML
JavaScript
<div id="loadIndicatorContainer"></div>
$(function() {
    $("#loadIndicatorContainer").dxLoadIndicator({
        visible: true,
        height: 40,
        width: 40
    });
});
Angular
HTML
TypeScript
<dx-load-indicator
    [(visible)]="isLoadIndicatorVisible"
    [height]="40"
    [width]="40">
</dx-load-indicator>
import { DxLoadIndicatorModule } from "devextreme-angular";
// ...
export class AppComponent {
    isLoadIndicatorVisible: boolean = true;
}
@NgModule({
    imports: [
        // ...
        DxLoadIndicatorModule
    ],
    // ...
})
Vue
<template>
    <DxLoadIndicator
        :visible.sync="isLoadIndicatorVisible"
        :height="40"
        :width="40"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxLoadIndicator } from 'devextreme-vue/load-indicator';

export default {
    components: {
        DxLoadIndicator
    },
    data() {
        return {
            isLoadIndicatorVisible: true
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

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

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoadIndicatorVisible: true
        };
    }

    render() {
        return (
            <LoadIndicator
                visible={this.state.isLoadIndicatorVisible}
                height={40}
                width={40}
            />
        );
    }
}

export default App;

If you need to use a custom image in the LoadIndicator, assign its URL to the indicatorSrc option.

jQuery
JavaScript
$(function() {
    $("#loadIndicatorContainer").dxLoadIndicator({
        visible: true,
        indicatorSrc: "https://js.devexpress.com/Content/data/loadingIcons/rolling.svg"
    });
});
Angular
HTML
TypeScript
<dx-load-indicator
    [(visible)]="isLoadIndicatorVisible"
    [indicatorSrc]="indicatorUrl">
</dx-load-indicator>
import { DxLoadIndicatorModule } from "devextreme-angular";
// ...
export class AppComponent {
    isLoadIndicatorVisible: boolean = true;
    indicatorUrl: string = "https://js.devexpress.com/Content/data/loadingIcons/rolling.svg";
}
@NgModule({
    imports: [
        // ...
        DxLoadIndicatorModule
    ],
    // ...
})
Vue
<template>
    <DxLoadIndicator
        :visible.sync="isLoadIndicatorVisible"
        :indicatorSrc="indicatorUrl"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxLoadIndicator } from 'devextreme-vue/load-indicator';

export default {
    components: {
        DxLoadIndicator
    },
    data() {
        return {
            isLoadIndicatorVisible: true,
            indicatorUrl: "https://js.devexpress.com/Content/data/loadingIcons/rolling.svg"
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

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

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoadIndicatorVisible: true
            indicatorUrl: "https://js.devexpress.com/Content/data/loadingIcons/rolling.svg"
        };
    }

    render() {
        return (
            <LoadIndicator
                visible={this.state.isLoadIndicatorVisible}
                indicatorSrc={this.state.indicatorUrl}
            />
        );
    }
}

export default App;
See Also