DevExtreme Angular - 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.

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.

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