DevExtreme Vue - 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
    ],
    // ...
})

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
    ],
    // ...
})
See Also