DevExtreme React - Customize the Loading Indicator

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

jQuery
JavaScript
$(function() {
    $("#loadPanelContainer").dxLoadPanel({
        closeOnOutsideClick: true,
        indicatorSrc: "https://js.devexpress.com/Content/data/loadingIcons/rolling.svg" 
    });

    $("#buttonContainer").dxButton({
        text: "Show the Load Panel", 
        onClick: function () {
            $("#loadPanelContainer").dxLoadPanel("show");
        } 
    });
});
Angular
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 option.

jQuery
JavaScript
$(function() {
    $("#loadPanelContainer").dxLoadPanel({
        closeOnOutsideClick: true,
        showIndicator: false
    });

    $("#buttonContainer").dxButton({
        text: "Show the Load Panel", 
        onClick: function () {
            $("#loadPanelContainer").dxLoadPanel("show");
        } 
    });
});
Angular
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