Angular LoadPanel - Customize the Loading Indicator

If you need to use a 3rd-party loading indicator inside the LoadPanel, assign its URL to the indicatorSrc property.

HTML
TypeScript
  • <dx-load-panel
  • [closeOnOutsideClick]="true"
  • [(visible)]="isLoadPanelVisible"
  • [indicatorSrc]="indicatorUrl">
  • </dx-load-panel>
  • <dx-button
  • text="Show the Load Panel"
  • (onClick)="isLoadPanelVisible = true">
  • </dx-button>
  • import { DxLoadPanelModule, DxButtonModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • isLoadPanelVisible: boolean = false;
  • indicatorUrl: string = "https://js.devexpress.com/Content/data/loadingIcons/rolling.svg";
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxLoadPanelModule,
  • DxButtonModule
  • ],
  • // ...
  • })

In case you do not need any loading indicator to be shown at all, assign false to the showIndicator property.

HTML
TypeScript
  • <dx-load-panel
  • [closeOnOutsideClick]="true"
  • [(visible)]="isLoadPanelVisible"
  • [showIndicator]="false">
  • </dx-load-panel>
  • <dx-button
  • text="Show the Load Panel"
  • (onClick)="isLoadPanelVisible = true">
  • </dx-button>
  • import { DxLoadPanelModule, DxButtonModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • isLoadPanelVisible: boolean = false;
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxLoadPanelModule,
  • DxButtonModule
  • ],
  • // ...
  • })
See Also