React LoadIndicator - 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 UI component size, using the height and width properties.

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
        v-model:visible="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 property.

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
        v-model:visible="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